height: auto 是高度链断裂起点，子元素 height: 100% 因父级 computed height 为 auto 而失效；嵌套 flex 中需设 min-height: 0 解除拉伸阻断；应统一用 flex: 1 替代 height: 100%。
父容器 height: auto 是高度链断裂的起点
Flex 嵌套时子元素 height: 100% 失效，根本不是嵌套本身的问题，而是某一层父容器的 height 计算值为 auto。浏览器查的是**直接父元素的 computed height**，只要它是 auto，子项的 height: 100% 就等于 100% × 0px = 0px —— 直接塌陷。
常见断点位置：
-
html或body没设height: 100%（尤其被 Normalize.css 等 reset 干扰后） - 外层 Flex 容器用了
flex-direction: column，但没给它自身设高，也没用flex: 1占位 - 中间某层是普通
div（非 Flex），且没继承或声明高度
验证方法：用开发者工具逐层点击目标子元素的父级，看 Computed 面板中 height 是否显示具体数值（如 428px 或 100vh），而不是 auto。
嵌套 Flex 容器默认 min-height: auto 会阻断拉伸
当一个 Flex 容器作为另一个 Flex 容器的子项时，它会被浏览器自动赋予 min-height: auto（Chrome 72+ 行为）。这个默认值会让它“拒绝塌缩”，进而阻止内部子项通过 flex: 1 向下拉伸——即使外层已分配了空间，内层也卡在内容高度不动。
典型现象：外层 .layout { display: flex; flex-direction: column; height: 100vh; }，中间区域 .main { flex: 1; } 看起来有高度，但里面的卡片就是不等高、不撑满。
解决方法只有一行：
`.main { min-height: 0; }`
不需要加 height，也不需要改 flex 值，min-height: 0 只是释放拉伸权限，让内部 flex: 1 或 align-items: stretch 正常工作。
height: 100% 和 flex: 1 在嵌套中语义冲突
在嵌套 Flex 场景下，混用 height: 100% 和 flex: 1 不仅多余，还会互相干扰：
- 子元素写了
height: 100%→ 浏览器认为你手动接管高度，忽略align-items: stretch的拉伸逻辑 - 父容器同时写了
height: 100%和flex: 1→ 语义矛盾，不同浏览器可能优先处理其中一个 - 嵌套越深，
height: 100%越容易因某层box-sizing: content-box、padding或border导致溢出或计算偏差
实操建议：
- 删掉所有嵌套层级中子元素的
height: 100%、min-height: 100%、max-height: 100% - 想填满剩余空间，统一用
flex: 1（等价于flex: 1 1 0） - 若需响应式回退（比如小屏用固定高、大屏用弹性），可组合写：
min-height: 30vh; flex: 1;
Safari 14–15.6 对嵌套 height: 100% 有引擎级忽略
这些版本的 Safari 不把 Flex 容器识别为“有明确高度的上下文”，哪怕父容器已设 height: 100vh，子项的 height: 100% 仍大概率不生效。这不是样式写错，是渲染引擎限制。
兼容性更稳的做法：
- 外层 Flex 容器确保有显式
display: flex和确定主轴方向 - 子 Flex 容器加
min-height: 0（必须） - 子项直接用
flex: 1，而非依赖百分比高度 - 避免在子项上同时写
align-self: stretch和height: 100%，后者在 Safari 中可能触发旧版 bug
真正难处理的，是那些夹在 iframe、canvas 或第三方组件中间的嵌套 Flex —— 它们自身对百分比高度支持极弱，此时别硬套 height: 100%，优先用 top/bottom 区间或 flex: 1 + min-height: 0 组合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
