百分比高度在flex子项中失效是因父容器computed height为auto，导致100%×0px=0px；flex:1可行因其基于剩余空间分配而非继承像素高度，且需父容器display:flex并有确定高度。
百分比高度在 Flex 子项中失效，不是浏览器 Bug，而是 CSS 规范强制要求的计算逻辑：height: 100% 必须基于**父容器的 computed height 像素值**换算；如果父容器是 height: auto（Flex 容器默认就是），那结果就是 100% × 0px = 0px —— 浏览器真按规范算出了 0，不是“没生效”，是算出来就是空。
为什么 display: flex 的父容器不自动提供高度上下文
很多人误以为开启 Flex 就等于有了高度基准，其实 display: flex 只改变子项排列方式，不改变自身高度行为。它仍默认 height: auto，即由内容撑开。子元素写 height: 100% 时，浏览器查它的直接父级（这个 Flex 容器）的 computed height，发现是 auto，立刻放弃计算，退回到内容高度。
- 用开发者工具选中该 Flex 容器 → 切到「Computed」面板 → 看
height值：如果是auto，链就断了 -
align-items: stretch不会生效，因为拉伸需要“可拉伸的空间”，而空间来源是父容器的高度，不是 Flex 属性本身 - UI 框架（如 Ant Design）可能给容器加了
min-height: 0，这会进一步压制拉伸行为，需手动覆盖为min-height: auto
为什么 flex: 1 能绕过这个问题
flex: 1 不依赖父容器有没有像素高度，它靠的是主轴剩余空间分配逻辑。只要父容器是 display: flex 且自身有明确高度（比如 height: 100vh 或被上层 flex: 1 撑开），子项就能参与分配。
-
flex: 1等价于flex: 1 1 0，其中flex-basis: 0表示从零开始分剩余空间 - 不要同时写
flex: 1和height: 100%，Chrome 会优先按 flex 规则走，Safari 14–15.6 可能直接忽略height - 若子项含图片或文字，
flex-basis: 0可能压扁内容，改用flex: 1 1 auto更稳妥
如何快速定位哪一层高度链断了
别猜，直接打开开发者工具，从目标元素开始，逐层点开它的父节点，在「Computed」面板里检查每一层的 height 是否为具体像素值（如 720px 或 100vh）。常见断点位置：
-
html或body没加height: 100%，或被 Normalize.css 等重置样式覆盖 - 中间某层用了
display: inline、float或position: absolute，导致它不再是子元素的包含块 - 某层 Flex 容器写了
min-height: 100vh却没写height，Safari 14–15.6 可能不认它为有效参照 - UI 框架注入的
min-height: 0或align-self: flex-start阻断了默认拉伸
真正卡住人的，往往不是没写 height，而是写了却没生效——因为你没打开开发者工具逐层看 computed height 到底是不是像素值。Flex 布局下，高度链比宽度链脆弱得多，任何一层 auto 都会让整条链失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
