CSS Flex - 如果内容更宽，列会切换到行吗？

Question

我正在尝试实现以下布局:

<Column 1, 50%> <Column 2, 50%>

根据某些情况，第 2 列的内容可能会更长，在这种情况下，它现在应该被推到第二行并占据 100% 的宽度。这意味着现在两者都是行。

<Row 1 (was Column 1), 100%>
<Row 2 (was Column 2), 100%>

现在我卡在等宽的列中，随着内容的增加，第二列垂直增长。

Answer 1

只是一个带有 flex-wrap 的 flex-box 布局？

.my-layout {
  display: flex;
  flex-wrap: wrap;
}

.my-layout > * {
  flex: 1 0 auto;
  /* optional: determine the minimum width of the cell before it breaks into the next line */
  min-width: 45%;
}

<div class="my-layout">
  <div style="background-color: salmon;">First Line</div>
  <div style="background-color: steelblue;">Second Line</div>
</div>

<br>

<div class="my-layout">
  <div style="background-color: salmon;">First Line First Line First Line First Line First Line First Line First Line First Line </div>
  <div style="background-color: steelblue;">Second Line</div>
</div>