CSS

Question

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

我试过使用 flexboxes 但我不知道从这里去哪里。

#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>

Answer 1

您可以在容器上 flex-wrap: wrap; 并在物品上 flex-grow: 1;。（全屏查看片段并调整浏览器宽度）

#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>

Answer 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>

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

CSS - How to force second div to another row when first div overflows

html

alignment

word-wrap

flexbox