flex容器默认height: auto导致子元素height: 100%计算为0px；需显式设置父容器height（非min-height），或改用flex: 1替代，嵌套时中间层加min-height: 0，且须逐层验证computed height。
Flex容器本身默认height: auto，它不提供高度上下文，子元素写height: 100%就等于在问“100% × auto 是多少”，结果是0px——不是没渲染，是真塌了。
为什么父容器display: flex却仍算不出高度
Flex布局只管排列，不管“给高”。即使你看到容器在页面上占了空间，只要它的Computed → height是auto（打开 DevTools 看一眼就知道），子元素的height: 100%就无效。
-
html和body没设height: 100%，整条链在起点就断了 - 某些 CSS reset（比如 Normalize.css）会悄悄把
html的height重置为auto或0 - 父容器用了
min-height: 100vh但没写height，height: 100%照样失效——min-height不参与百分比计算 - 嵌套 Flex 时，中间某层漏了高度声明（比如外层
flex-direction: column，内层flex-direction: row），链路直接中断
Chrome/Safari 对height: 100%在 Flex 中的处理差异
Safari 14–15.6 存在引擎级缺陷：它不把display: flex父容器识别为有效参照物，哪怕你写了height: 100vh，子项height: 100%也会退化为auto。Chrome/Firefox 虽能识别，但也要求父容器自身有height声明（不是min-height，也不是靠flex: 1推导出来的高度）。
- 必须显式写
height: 100vh或height: calc(100vh - 60px)等具体值 - UI 框架常给子项加
min-height: 0，这会阻止align-items: stretch行为，在 Safari 下尤其致命 - 别同时写
height: 100%和flex: 1，语义冲突，浏览器可能忽略其中一个
用flex: 1替代height: 100%更可靠
flex: 1不依赖父容器有没有“像素高度”，它从flex-basis: 0开始拉伸吃剩余空间，天然适配动态内容和多层嵌套。
- 父容器必须是
display: flex且有明确方向（flex-direction: column或row） - 嵌套 Flex 时，中间层容器要加
min-height: 0，否则默认min-height: auto会卡住内部flex: 1 - 子项若含图片或文字，
flex: 1 1 auto比flex: 1更安全，避免内容被压扁 - 绝对定位元素的包含块可能跳过视觉父级，此时
height: 100%参考的是html或视口，不是 Flex 容器——查的时候得顺着包含块逻辑往上找
真正容易被忽略的，是没打开 DevTools 逐层点开看Computed → height：很多人反复改样式，却从不确认哪一层的height实际是auto。链路不是“设一次就通”，而是每层都得主动声明；而min-height: 0这种看似无害的重置，在 Flex 场景下就是隐形断点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
