在 flexbox 中换行，但为不同长度的文本保持相对列宽答案

【问题标题】：Wrap text in flexbox, but maintain relative column width for different lengths of text在 flexbox 中换行，但为不同长度的文本保持相对列宽
【发布时间】：2017-02-01 10:01:24
【问题描述】：

我正在为 Wordpress 网站使用 flexbox。两列，子 1 应占页面的 75%，子 2 应占 25%。在 child 1 中使用一个小句子，它可以工作，但是，对于一个大文本，它会将 child 1 推到 100% 的页面宽度。长文本可能不会将 div 推到 100%，而是在 div 内换行。请参阅下面的 jsfiddle 示例。我怎样才能解决这个问题？在这方面很新。天呐！

http://jsfiddle.net/luchtrat/jnys3u5p

body *{border: 1px solid red;} /* just to preview what's happening */

#parent {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  padding: 10px;
}
#child_1 {
  flex-grow: 2;
}
#child_2 {
  flex-grow: 1;
}

<div id="parent">
  <div id="child_1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam dapibus volutpat. Proin suscipit massa at ipsum semper, et pretium ante bibendum. Vivamus justo erat, aliquet maximus turpis quis, sagittis tempor lectus. Nullam eleifend, nisi
    vitae condimentum elementum, arcu sapien finibus nisl, sit amet euismod nibh felis quis turpis. Fusce nec egestas sapien, non ultricies ligula. Aliquam ac libero elementum, rhoncus massa quis, posuere massa.
  </div>
  <div id="child_2">Fusce nec egestas sapien.</div>
</div>
<div id="parent">
  <div id="child_1">Lorem ipsum dolor sit amet.</div>
  <div id="child_2">Fusce nec egestas sapien.</div>
</div>

【问题讨论】：

你的代码在哪里？
在你的 CSS 中使用 flex-wrap: wrap;。
已添加代码和链接。

标签： css flexbox word-wrap

【解决方案1】：

请勿重复 ID。每页的 ID 应该是唯一的。改用类：
简单地使用：flex:2; 和 flex:1 分别用于您的 child_ 元素
或者更好的flex:3，如果你想得到75% → 25% 需要的话

body * {border: 1px solid red;}

.parent {
  display: flex;
  flex-flow: row wrap;
  padding: 10px;
}
.child_1 {
  flex: 3; /* "75%" */
}
.child_2 {
  flex: 1; /* "25%" */
}

<div class="parent">
  <div class="child_1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam dapibus volutpat. Proin suscipit massa at ipsum semper, et pretium ante bibendum. Vivamus justo erat, aliquet maximus turpis quis, sagittis tempor lectus. Nullam eleifend, nisi
    vitae condimentum elementum, arcu sapien finibus nisl, sit amet euismod nibh felis quis turpis. Fusce nec egestas sapien, non ultricies ligula. Aliquam ac libero elementum, rhoncus massa quis, posuere massa.
  </div>
  <div class="child_2">Fusce nec egestas sapien.</div>
</div>
<div class="parent">
  <div class="child_1">Lorem ipsum dolor sit amet.</div>
  <div class="child_2">Fusce nec egestas sapien.</div>
</div>

【讨论】：

这真的很奇怪 - 将上面的代码添加到我的 wordpress php 文件中时；它不起作用。
@JeroenPede 你添加了所有的-vendor- 前缀吗？（为了简单起见，我删除了它们）
是的，我做到了。在 jsfiddle 中尝试您的代码作为测试时，效果很好。在我的 wordpress css 和 php 文件中复制粘贴时，它不起作用。
@JeroenPede 检查元素并查看哪些样式被其他类/规则覆盖（划掉）。
@JeroenPede P.S：...只是检查...您是否将 ID 更改为类？从#parent 到.parent 等等...... HTML 和 CSS 中的等等？ :) 不客气