百分比高度在Flex子项中失效是因为父容器height为auto，导致100%×0px=0px；flex:1可行因其依赖剩余空间分配而非父级像素高度，而height:100%必须父级有确定高度。
百分比高度在 Flex 子项中失效，不是 Flex 本身的问题，而是因为 height: 100% 根本没算出像素值——父容器的 height 是 auto，浏览器只能算出 100% × 0px = 0px。
Flex 容器的 height 默认是 auto，不是“有高度”
很多人误以为 display: flex 就自带高度上下文，其实不然。Flex 容器默认 height: auto，它只负责排列子项，不负责提供高度基准。子元素写 height: 100% 时，浏览器查它的直接父级（即 Flex 容器）的 computed height，发现是 auto，立刻放弃计算，退回到内容撑开行为。
- 用开发者工具选中 Flex 容器 → Computed 面板里看
height值：如果是auto，链就断了 - 即使你给子项加了
align-self: stretch，只要父容器没高度，这个 stretch 也无处可伸 -
min-height: 100vh或height: 100vh可以绕过该问题，但要注意 iOS Safari 地址栏收起时vh会跳变
为什么 flex: 1 能行，而 height: 100% 不行
flex: 1 不依赖父容器的 height 像素值，它靠的是 Flex 主轴剩余空间分配逻辑。只要父容器是 display: flex 且自身有明确高度（比如 height: 100vh 或被上层 flex: 1 撑开），子项就能参与空间分配。
-
flex: 1等价于flex: 1 1 0，flex-basis: 0让它从零开始分剩余空间，不依赖初始高度 -
height: 100%是纯继承行为，必须父级有确定像素高，否则直接失效 - 混用两者（比如同时写
flex: 1和height: 100%）可能触发冲突，Chrome 会优先按 flex 规则走，忽略 height
Safari 14–15.6 的特殊坑：flex 容器不被识别为高度上下文
这些版本的 Safari 对 Flex 容器内百分比高度的支持更弱：哪怕父容器写了 height: 100vh，子项的 height: 100% 仍可能被当成无效声明处理，最终渲染为 auto。
立即学习“前端免费学习笔记（深入）”；
- 解法不是加更多
!important，而是删掉子项的height: 100%，改用默认align-items: stretch+ 确保父容器有显式height - 若父容器是嵌套 Flex（比如外层 column，内层 row），必须给每一层 Flex 容器都设
height或flex: 1，Safari 不会自动穿透 - 避免在子项上写
min-height: 0后又写height: 100%——Safari 15.4 曾因此完全忽略高度声明
真正卡住人的，往往不是“没写 height”，而是“写了 height 却没生效”，因为你没打开开发者工具逐层点开看 computed height 到底是不是像素值。Flex 布局下，高度链比宽度链脆弱得多，任何一层 auto 都会让整条链失效。
