如何让多个div中的文本如同在单个div中自动换行？

要让浅蓝色div内的文本换行效果和浅黄色div一致，你可以通过以下两种方式调整：

方式一：修改flex容器的排列方向 #

给浅蓝色div内的flex容器添加flex-direction: column样式，让两个子div垂直堆叠，每个子div都会占满200px的容器宽度，文本自然会在容器宽度内换行，和浅黄色div的效果一致。

修改后的代码：

<div style="width: 200px; background-color: lightblue">
  <div style="display:flex; flex-direction: column">
    <div>This is some text.</div><div>This is some text. This is some text.</div>
  </div>
</div>

<div style="width: 200px; background-color: lightyellow">
  <div style="display:flex ">
    <div>This is some text. This is some text. This is some text.</div>
  </div>
</div>

方式二：合并子div为单个元素 #

如果不需要保留两个独立的子div，可以把它们的内容合并到同一个div里，这样结构和浅黄色div完全一致，换行效果自然相同。

修改后的代码：

<div style="width: 200px; background-color: lightblue">
  <div style="display:flex ">
    <div>This is some text. This is some text. This is some text.</div>
  </div>
</div>

<div style="width: 200px; background-color: lightyellow">
  <div style="display:flex ">
    <div>This is some text. This is some text. This is some text.</div>
  </div>
</div>

原因说明 #

浅黄色div内的flex容器只有一个子元素，该元素会自动适应容器宽度，文本在200px范围内正常换行。而浅蓝色div原本的flex容器是水平排列两个子元素，每个子元素的宽度由自身内容决定，导致第二个子元素的文本只能在剩余的有限宽度内换行，和浅黄色的效果差异明显。上述两种调整方式都能让文本在容器的完整宽度内换行，从而对齐效果。

内容的提问来源于stack exchange，提问作者Anna Ira Hurnaus