CSS - 当第一个 div 溢出时如何强制第二个 div 到另一行答案

【问题标题】：CSS - How to force second div to another row when first div overflowsCSS - 当第一个 div 溢出时如何强制第二个 div 到另一行
【发布时间】：2017-11-25 02:38:37
【问题描述】：

我有两个宽度相等的 div 并排放置。当第一个 div 中的文本溢出到第二行时，我希望将第二个 div 放在第一个 div 的下方 - 使每个 div 的宽度加倍。这在 CSS 中可行吗？

我尝试过使用 flexbox，但我不知道从哪里开始。

#container {
  display: flex;
  width: 500px;
  border: 1px solid black;
}

.cell {
  flex: 1;
}

<div id="container">
  <div class="cell" style="background-color:pink;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  </div>
  <div class="cell" style="background-color:lightblue;">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco
  </div>
</div>

【问题讨论】：

我不太确定你在问什么，你能用不同的方式解释吗？我有点困惑，因为我的解释是你希望孩子的身高是父母身高的 100%，所以当一个孩子长大并扩大父母的身高时，另一个孩子也会这样做，但我正在解释另一部分话说你想让第二行把 div 包起来，在它下面？

标签： html css flexbox alignment word-wrap

【解决方案1】：

您可以在容器上打开flex-wrap: wrap;，在项目上打开flex-grow: 1;。（全屏查看sn-p并调整浏览器宽度）

#container {
  display: flex;
  border: 1px solid black;
  flex-wrap: wrap;
}

.cell {
  flex-grow:1;
}

<div id="container">
  <div class="cell" style="background-color:pink;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  </div>
  <div class="cell" style="background-color:lightblue;">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco
  </div>
</div>

【讨论】：

这不是我想要的行为。如果第一个 div 没有溢出，则第二个 div 应该与第一个 div 位于同一行（在这种情况下，两个 div 应该是 50% 宽度）。您的代码不满足此条件。
啊，所以你希望第二个包裹下一个，而不是第一个。很高兴你明白了。

【解决方案2】：

我想通了。两个 div 都必须是 min-width: 50%，最后一个 div 必须是 flex: 1。父 div 应该有flex-wrap: wrap。

#container {
    display: flex;
    flex-wrap: wrap;
    width: 500px;
    border: 1px solid black;
}
#cell1 {
    background-color: pink;
    min-width: 50%;
}
#cell2 {
    background-color: lightblue;
    min-width: 50%;
    flex: 1;
}

<div id="container">
    <div id="cell1">
        Lorem ipsum dods Ut eniasdfasdf
    </div>
    <div id="cell2">
        Ut enim ad minim veniam, quis nostrud exercitation ullamco
    </div>
</div>

【讨论】：