换行后的Flexbox元素溢出父容器问题求助

问题背景 #

使用Flexbox实现列布局，期望垂直空间不足时条目换行到下一列，且换行后的元素填充剩余水平空间，但实际效果是换行后的元素溢出父容器。尝试过flex-grow、flex-shrink、word-wrap等属性组合均无效。

原代码：

<div style="width:800px;display:flex;flex-wrap:wrap;flex-direction:column;background:rgb(230, 230, 230);height:300px;">
  <div style="border:1px solid red;">
    <div style="border:1px solid blue;">Thats a short text.</div>
  </div>
  <!-- 省略其他中间元素 -->
  <div style="border:1px solid red;">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

问题原因 #

这并非Flexbox的限制，而是缺少两个关键约束：

1. Flex子元素默认min-width: auto，即元素宽度不会小于内容宽度，长文本元素无法收缩，导致溢出
2. 未配置合适的flex属性，让子元素能够填充换行后的剩余水平空间

解决方案 #

给所有Flex子元素添加以下属性组合：

• flex: 1 1 auto：允许元素伸缩，基于内容设置基础尺寸，同时填充可用空间
• min-width: 0：打破默认最小宽度限制，允许元素收缩至小于内容宽度
• overflow-wrap: break-word：确保长文本/长单词自动换行，避免横向溢出

修改后的代码：

<div style="width:800px;display:flex;flex-wrap:wrap;flex-direction:column;background:rgb(230, 230, 230);height:300px;">
  <div style="border:1px solid red;flex:1 1 auto;min-width:0;overflow-wrap:break-word;">
    <div style="border:1px solid blue;">Thats a short text.</div>
  </div>
  <!-- 省略其他中间元素 -->
  <div style="border:1px solid red;flex:1 1 auto;min-width:0;overflow-wrap:break-word;">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

补充说明 #

• flex:1 1 auto 等价于 flex-grow:1（允许元素增长填充空间）、flex-shrink:1（允许元素收缩）、flex-basis:auto（基于内容设置基础宽度）
• min-width:0 是核心修复点，解决了Flex子元素无法收缩到内容宽度以下的问题
• overflow-wrap:break-word 处理长文本溢出，确保内容在元素宽度范围内换行

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