为什么设置flex-basis:50%的第三个flex子元素没有超出父容器？

核心原因：flex-shrink默认值为1，空间不足时会自动收缩子项 #

Flex布局下，flex-wrap: nowrap（默认值）时，容器会优先将所有子项排列在同一行，当子项总基准宽度超过父容器可用宽度时，会触发收缩规则，而非直接溢出或换行，这一规则由flex-shrink属性控制，和你提到的flex-grow无关：

• flex-grow仅在父容器有剩余空间时生效，控制子项是否拉伸分配剩余空间，默认值为0即不拉伸，符合你的认知
• flex-shrink仅在子项总宽度超出父容器时生效，控制子项是否收缩以适配父容器宽度，默认值为1即允许收缩

具体宽度计算逻辑 #

你的场景下：

1. 3个子项的flex-basis均为50%，总基准宽度 = 3*50% = 150%，比父容器可用宽度多溢出了50%的宽度
2. 三个子项flex-shrink都是默认值1，收缩权重完全相同，溢出的50%宽度会平均分配给三个子项各自收缩
3. 单个子项最终实际宽度 = 50% - (50%/3) ≈ 33.33%，三个子项总宽度刚好填满父容器100%宽度，所以视觉上呈现等宽排列的效果

验证方法 #

你可以给子项添加flex-shrink: 0禁止收缩，就能看到符合你最初预期的溢出效果：

.child {
  background-color: #0074d9;
  padding: 20px;
  color: white;
  flex-basis: 50% !important;
  border: 3px solid #4CAF50;
  flex-shrink: 0; /* 新增：禁止子项收缩 */
}

此时父容器没有设置flex-wrap: wrap，三个子项总宽度150%无法收缩，会直接超出父容器显示。

flex-wrap: wrap生效的原因 #

当你给父容器设置flex-wrap: wrap后，容器允许子项换行，不会触发收缩逻辑，子项会优先保持flex-basis设定的50%宽度，第一行仅能容纳2个50%宽度的子项，第三个子项就会自动换行到第二行。

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