如何在使用flex-wrap: wrap的Flexbox布局中实现文本自动换行？

我明白你遇到的困扰了——用固定高度的flex-direction: column容器并开启flex-wrap: wrap时，带长文本的子元素会直接撑开列宽，导致溢出父容器。要实现子元素自动从上到下排列、高度不足时换行成多列，同时文本自动换行且完全不需要硬编码宽度，可以按以下方式调整：

核心修改思路 #

• 约束父容器的宽度，避免被子元素的长内容撑开
• 让每个flex子项占满所在列的宽度，强制文本在列内自动换行

修改后的完整代码 #

<div style=" 
  display: flex; 
  flex-direction: column; 
  height: 50px; 
  background-color: blue; 
  flex-wrap: wrap; 
  align-content: flex-start;
  width: 100%; /* 让父容器宽度继承自上下文，不被子元素撑开 */
  box-sizing: border-box; /* 可选，避免padding/border干扰宽度计算 */
" >
  <div style="
    display: flex; 
    flex-direction: row; 
    align-items: center;
    width: 100%; /* 子项占满当前列的宽度 */
  ">
    <div style="background-color: red; width: 100%;">Other text here</div>
  </div>
  <div style="
    display: flex; 
    flex-direction: row; 
    align-items: center;
    width: 100%; /* 子项占满当前列的宽度 */
  ">
    <div style="background-color: red; width: 100%;">Another text here</div>
  </div>
  <div style=" 
    display: flex; 
    flex-direction: row; 
    align-items: center;
    width: 100%; /* 子项占满当前列的宽度 */
  " >
    <div style="background-color: aqua; width: 100%;">
      random text goes here random text goes here random text goes here random text goes here
    </div>
  </div>
</div>

为什么这样有效？ #

1. 父容器的width: 100%：这会让父容器的宽度完全继承自它的父元素（比如页面body或外层容器），而不是被内部的长文本强制撑开，从根源上限制了每一列的最大宽度。
2. 子项的width: 100%：确保每个子元素在所在的列里完全占满宽度，这样内部的文本容器就有了明确的宽度边界，自然会触发自动换行。
3. 文本块的width: 100%：让长文本所在的容器也占满父级的宽度，彻底避免文本内容撑爆容器的情况。

调整后，当容器高度不足时，元素会自动换行到第二列，所有列的宽度都不会超过父容器，文本也能正常自动换行，完全符合你的需求。

内容的提问来源于stack exchange，提问作者rodrigoArantes