flex-wrap: wrap 不是高度塌陷的元凶，它仅允许子项换行而不改变容器高度计算逻辑；真正原因是父级或祖先元素缺失可测量的高度基准，导致换行后容器仅按首行内容撑高。
flex-wrap: wrap 本身不会导致高度塌陷
直接说结论：flex-wrap: wrap 不是高度塌陷的元凶。它只是允许子项换行，不改变容器自身高度计算逻辑。真正让容器“看起来塌了”的，几乎总是父级或祖先元素缺失可测量的高度基准——flex-wrap 只是把问题暴露得更明显：当子项换行后，若容器没高度约束，它就按“第一行内容高度”收缩，而后续行可能被裁剪或压扁。
为什么 wrap 后子项换行却撑不开容器？
常见于 flex-direction: row（默认）下，子项宽度总和超容器、触发换行，但容器高度仍为 0 或极小。根本原因还是那条链断了：
- 父容器（即 flex 容器的直接父级）没设
min-height或height，导致 flex 容器自身height为auto - 子项用了
flex: 1或align-self: stretch，但它们需要交叉轴（此处是垂直方向）有可用空间才能拉伸；auto高度 = 没空间 - 换行后，多行子项的总高度本应累加，但浏览器发现父容器没高度锚点，就只按首行内容撑高，其余行被挤出可视区或折叠
调试时重点看这三点
打开开发者工具的 Computed 面板，逐层确认：
-
flex容器的直接父元素，min-height是否为0或auto？如果是，加min-height: 300px或min-height: 100dvh立刻验证 -
flex容器自身的height计算值是否非零？若为auto，说明上层没给高度，flex-wrap再怎么 wrap 也无济于事 - 换行后的子项，
align-self是否仍是auto或stretch？如果被写死成flex-start或带height值，它们就不会参与垂直拉伸
别在 flex-wrap 上浪费时间修 bug
几乎所有所谓 “flex-wrap: wrap 导致塌陷” 的案例，最后都指向同一个事实：你忘了给某一层加 min-height。尤其是嵌套较深时，容易卡在 html、body 或某个中间 wrapper 上。iOS Safari 对 100vh 的地址栏抖动问题，也常让 min-height: 100vh 在换行后失效——这时候换成 min-height: 100dvh 更可靠。真正难调的不是 wrap，而是哪一层悄悄丢了高度锚点。
立即学习“前端免费学习笔记（深入）”；
