最稳解法是给flex容器的直接父元素加min-height而非在容器自身设height:100%；因flex:1仅分配父容器已有交叉轴空间，若父高度为auto或0px则失效；需逐层检查computed height并配合min-height:0与overflow:auto修复塌陷。
直接给 flex 容器的直接父元素加 min-height，别在 flex 容器自己身上写 height: 100%——这是最稳、最不容易断链的解法。
为什么 flex: 1 在嵌套里突然失效？
根本不是代码写错了，而是父容器压根没“高度可分”。flex: 1 只分配父容器已有的交叉轴空间，如果父容器 height 是 auto 或计算值为 0px，子项再怎么写 flex: 1 都是空转。
- 用开发者工具检查父容器的
Computed → height，如果是auto或0px，问题就在这儿 - Bootstrap 的
.d-flex、.flex-column只设display: flex，不提供高度，必须手动补min-height - 整页 flex 布局前，别忘了先给
html, body { min-height: 100vh; }
嵌套两层以上 flex 时，min-height: 0 必须加在哪？
加在「作为 flex 项目的那个子容器」上，也就是它在父 flex 中的样式里。这不是设最小高度，而是解除浏览器对 flex 项目的默认限制（Chrome 默认加了 min-height: auto，Firefox 还是 min-height: 0）。
- 典型位置：
.modal-body里的.d-flex子容器、卡片内层div、Grid 单元格里的 flex 容器 - 只加
min-height: 0不够，还得配合overflow: auto或overflow: hidden——前者更稳妥，既防塌陷又允许滚动 - 如果该子容器内部还要再嵌套 flex，同样要检查它的直接父级是否也在
flex: 1链路上
为什么加了 overflow: hidden 就“好了”？
它不是靠隐藏内容来“修复”，而是触发 BFC（块级格式化上下文），强制浏览器重新计算该元素的高度贡献。尤其当它是 flex: 1 的子容器时，BFC 能确保其内部内容哪怕脱离文档流（如绝对定位），也不会导致父容器高度坍缩。
- 不加
overflow：flex: 1子容器可能因内容溢出或未设高度，被渲染为0高度 - 加
overflow: auto：保证高度计算，同时避免关键内容被意外裁剪 - iOS Safari 对
overflow: hidden在position: fixed元素中有兼容问题，生产环境建议加-webkit-overflow-scrolling: touch
复杂点在于：塌陷往往不是单一层的问题，而是某一层隐式高度丢失后，整条 flex: 1 链路就断了。逐层用开发者工具看 computed height 是否非零，比猜代码更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
