Flex子项height: 100%不生效是因为父容器height为auto，导致百分比无计算基数；应改用flex: 1或确保父容器有显式高度（如100vh），并检查各层Computed height是否为具体值。
Flex容器里写height: 100%不生效，不是你漏写了display: flex，而是浏览器根本没地方去乘这个“100%”——父容器的height是auto，100% × auto = 0px，结果就是塌陷。
为什么height: 100%在Flex子项里算不出像素值
浏览器计算height: 100%时，只看**直接父元素的computed height值**。如果父容器是display: flex但没写height、min-height或flex: 1撑出明确高度，它的height就是auto。这时候子项的100%没有基数，只能退化为auto。
- 用开发者工具选中父Flex容器 → 切到“Computed”面板 → 看
height是不是具体数值（如100vh、420px），而不是auto -
min-height: 100vh不能当百分比高度的参照物，旧版Chrome和Safari都不认 - 某些UI框架（如Ant Design）会给子项悄悄加
min-height: 0，这会直接锁死align-items: stretch，必须显式覆盖为min-height: auto
用flex: 1替代height: 100%更可靠
flex: 1不依赖父容器的height像素值，它靠的是主轴剩余空间分配逻辑。只要父容器是display: flex且自身有明确高度来源，子项就能拉伸。
- 父容器必须是
display: flex或display: inline-flex - 父容器自身高度不能是
auto：可以是height: 100vh，也可以是被上层flex: 1撑开 - 子项不能有
height、max-height或min-height: 0等阻止拉伸的声明 - 避免同时写
flex: 1和height: 100%，Chrome可能忽略后者，Safari可能直接失效
Safari 14–15.6 和 Chrome 49 及更早的硬坑
这些版本的浏览器内核不把Flex容器识别为有效的百分比高度包含块，哪怕父容器写了height: 100vh，子项的height: 100%仍会被当成无效声明处理。
立即学习“前端免费学习笔记（深入）”；
- 解法不是堆
!important，而是删掉子项的height: 100%，改用默认align-items: stretch+ 确保父容器有显式height - 嵌套Flex时（比如外层
flex-direction: column，内层row），每一层都得单独加height或flex: 1，Safari不会穿透 - 旧版Chrome中，
flex: 1比height: 100%稳定得多，但前提是父容器自己写了height: 1px这种最低限度的显式值
真正卡住人的，往往不是“没写高度”，而是“写了却没生效”——因为某一层父容器的height在Computed面板里还是auto。Flex布局的高度链非常脆弱，任何一层断掉，整条链就归零。
