父容器height为auto导致百分比高度失效，因浏览器计算height:100%时只认直接父元素computed height，auto×100%=0px；须逐层检查computed面板height值，确保html/body及所有中间父级均有具体高度值（如100vh），并避免min-height:0等干扰。
父容器 height 是 auto，百分比根本没得算
浏览器看到 height: 100%，第一件事是查直接父元素的 computed height 值。如果父元素是 display: flex 但没设 height 或 min-height，那它的 height 就是 auto —— 算出来就是 100% × 0px = 0px，子元素自然塌成一条线。
常见错误现象：.main 写了 height: 80% 却看不见；检查半天 CSS，结果发现 .layout 这个父容器连 height 都没写。
- 必须逐层向上确认：从目标元素开始，用开发者工具点开每一级父节点，在 “Computed” 面板里看
height是不是具体数值（如100vh、420px），而不是auto -
html和body是起点，但不是终点：两者都得加height: 100%，否则链路在根就断了 - 某些 CSS reset（比如 Normalize.css）会悄悄重置
html或body的height，导致你写了也白写
Safari 14–15.6 不认 Flex 容器当高度参照物
这不是兼容性补丁能解决的问题，是 Safari 引擎级缺陷：哪怕父容器写了 height: 100vh，子元素的 height: 100% 依然被当成无效声明处理，最终渲染为 auto。
它只认显式 height 声明，min-height、flex: 1 推导出的高度都不行。
- 解法不是堆
!important，而是删掉子项的height: 100%，改用默认align-items: stretch+ 确保父容器有height - 嵌套 Flex 时更危险：外层
column、内层row，必须每层 Flex 容器都设height或flex: 1，Safari 不会自动穿透 - 特别注意 UI 框架注入的
min-height: 0（如 Ant Design 的按钮、表格行），它会卡住拉伸，需手动覆盖为min-height: auto
flex: 1 比 height: 100% 更可靠，但三处容易断链
flex: 1 不依赖父容器“已有像素高”，靠的是主轴剩余空间分配逻辑，所以它能在很多 height: 100% 失效的地方起作用。但它不是开关一开就灵，三处硬前提缺一不可：
- 父容器必须是
display: flex或display: inline-flex—— 否则flex属性直接被忽略 - 父容器自身高度得有来源：要么自己写了
height: 100vh，要么被上层flex: 1撑开；如果它仍是height: auto，“剩余空间”就算出来是0 - 子元素不能被
min-height: 0锁死：这个值常见于框架重置样式，会阻止拉伸，需显式覆盖
另外，flex-direction: column 时别再写 height: 50% —— 它语义混乱，且优先级低于 flex-basis，基本被忽略。想按比例分高，用 flex: 0 0 60%（即 flex-basis: 60%）。
真正卡住人的，是 computed height 没变像素值
很多人说“我明明写了 html, body { height: 100% }”，却还是失效。问题往往不出在第一层，而出现在第三或第四层：某个 .container 被 position: relative 和 top: 10px 干扰了包含块判定；或者某个 div 被框架加了 align-self: flex-start，直接关掉了 stretch。
高度链比宽度链脆弱得多，任何一层 height: auto 都会让整条链失效。最省事的办法不是猜，而是打开开发者工具，逐层点开看 computed height —— 只要出现 auto，就说明链路上某一级断了。
最容易被忽略的，是那些看似无害的重置样式，比如 min-height: 0，它在 Flex 场景下会悄悄破坏拉伸行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
