父容器高度塌陷是因子Flex未真实撑开所致，需同时满足：align-items: stretch、无align-self覆盖、子容器内容真实产生高度；嵌套时子Flex常需min-height: 0解禁默认限制。
Flex子容器高度撑不开父容器的常见表现
父元素设了 display: flex，但子元素本身是 display: flex 且内部有内容，结果父容器高度塌陷——只高到子容器的“初始行高”，而不是子容器实际渲染后的高度。这不是bug，是Flex默认的 align-items: stretch 对“已设置高度/最小高度”的子项失效导致的。
关键点在于：当子Flex容器没有显式高度约束（如 height、min-height），又没触发BFC或内容溢出时，它的高度由内容决定；而父Flex在未设 align-items 或设为 stretch 时，**不会反向拉伸自己去适应子容器的最终渲染高度**。
让父Flex真正“继承”子Flex高度的实操条件
必须同时满足以下三点，缺一不可：
- 父Flex需设
align-items: stretch（默认值，一般不用写） - 子Flex容器不能有
align-self: center/flex-start等覆盖行为 - 子Flex容器自身必须能“撑开”——即它内部的内容要真实产生高度，且不能被
overflow: hidden或height: 0类属性压制
最常漏掉的是第三点：比如子Flex里只放了 position: absolute 的元素，或者用了 flex: 0 0 auto 但内容为空，此时子Flex高度为0，父容器自然也撑不开。
立即学习“前端免费学习笔记（深入）”；
为什么加 min-height: 0 有时管用？
这是最容易被忽略的兼容性细节。当子Flex容器是另一个Flex的子项（即嵌套Flex），且父Flex设了 flex-direction: column，浏览器对子项的默认最小尺寸限制（min-height: auto）会阻止它收缩——但反过来，**如果子Flex本身需要根据内容扩展，却因父Flex的隐式 min-height: auto 被卡住，就得手动重置**。
所以遇到“明明内容很多，父容器就是不长高”，优先检查子Flex是否加了：
.child-flex {
min-height: 0;
}
这个规则在Chrome 80+、Firefox 68+、Safari 14.1+ 是必需的，尤其当子Flex内部有 flex: 1 占位或动态内容时。
替代方案：不用依赖“继承”，直接控制高度流向
与其让父容器被动“继承”，不如主动定义高度来源。两种更稳的做法：
- 把高度逻辑上移：让最外层容器设
min-height: 100vh或基于视口计算的高度，子级用flex: 1填充 - 用
height: fit-content（注意兼容性：Safari 15.4+ 支持，旧版需回退到min-height: -webkit-fit-content）
特别提醒：height: fit-content 在Flex容器上表现不稳定，**仅推荐用于非Flex的普通块级父容器**；若父容器必须是Flex，老老实实用 min-height: 0 + 内容真实撑开更可靠。
嵌套Flex的高度传递不是自动连通的管道，而是靠每一层的尺寸策略显式打通。漏掉任意一层的最小高度释放或内容占位，整条链就断了。
