Flex容器中height:100%失效本质是父级computed height为auto导致计算结果为0px，需逐层检查computed height是否为具体像素值。
百分比 height 在 Flex 容器中“无法继承”，本质不是继承失败，而是浏览器压根没算出数值——因为父容器的 computed height 是 auto，导致 100% × 0px = 0px。你写的 height: 100% 没错，但上下文断了。
为什么父容器 height: auto 就让子元素 height: 100% 归零
浏览器查的是**直接父元素的 computed height 值**，不是它写了什么 CSS 规则。Flex 容器默认就是 height: auto，哪怕它内部有 flex: 1 子项、哪怕外层也用了 Flex，只要没显式设高，它的 computed height 就是 auto。子元素一算 100% × auto，结果只能退化为内容高度或 0px。
- 打开开发者工具 → 选中该 Flex 容器 → 切到「Computed」面板 → 看
height行：如果是auto或0px，链就断了 - 常见断点：Normalize.css 或 Ant Design 默认重置了
html和body的height，你写了body { height: 100% }却无效，大概率是被覆盖了 -
min-height、max-height、flex: 1都不能替代height作为百分比参照源（旧版 Chrome 49 及更早版本甚至不认height: 100vh）
Flex 容器里写 height: 100% 会禁用 align-items: stretch
一旦子元素声明了 height: 100%，浏览器就认为你手动接管了高度控制，自动放弃默认的拉伸行为。哪怕父容器有明确高度，子项也不会撑满——这不是 bug，是规范逻辑。
- 想靠默认拉伸，就别写
height: 100%，删掉它，只保留align-items: stretch（父容器需有高度） - 若子元素被 UI 框架注入了
min-height: 0（如表格行、按钮），必须显式覆盖为min-height: auto，否则拉伸被锁死 - 在
flex-direction: column下，height: 60%基本无效，应改用flex: 0 0 60%（即设置flex-basis）
Safari 14–15.6 和旧版 Chrome 的特殊坑
这些版本解析逻辑更保守：Safari 不把 display: flex 父容器识别为有效高度上下文；Chrome 49 及更早版本甚至不把 flex: 1 推导出的高度当真。
立即学习“前端免费学习笔记（深入）”；
- Safari 14–15.6 中，必须给父 Flex 容器**显式写
height**（min-height: 100vh或flex: 1都不行） - Chrome 49 及更早：逐级向上写死
height，例如html, body { height: 100% }+.layout { height: 100vh }，漏一层就全崩 - 嵌套两层以上 Flex 时，每一层都要单独加
height，不能指望外层flex: 1“透传”高度
真正该检查的不是代码，是 computed height 链
卡住人的从来不是“没写 height”，而是“写了却没生效”。你得一层层点开开发者工具，从目标元素开始，往上查每一层的 computed height 是否为具体像素值（如 720px、100vh）。
- 常见断点位置：
html或body没设高；中间某层用了position: absolute或float，不再是包含块；某层 Flex 容器被框架塞了min-height: 0 -
100vh虽快，但在 iOS Safari 地址栏收起时会跳变，且和overflow: auto、position: fixed冲突，不如flex: 1稳定 - 如果子元素含图片，确保它有
height: auto或显式尺寸，否则 Safari 无法估算最小高度，拉伸可能失效
