flex子项height: 100%失效因父容器高度链断裂，需确保html、body及各层父容器均有确定高度（如height: 100%或flex: 1），并避免min-height: 0等干扰样式。
Flex容器里写height: 100%却没撑开，不是CSS写错了，而是浏览器根本算不出“100%”对应多少像素——它的父级computed height是auto，所以100% × 0px = 0px。
为什么html和body必须同时设height: 100%
浏览器里html和body默认不占满视口高度，它们只是“包裹内容”的容器。如果其中任意一个的computed height是auto，整条高度链就断了。
-
body { height: 100%; }单独写没用，因为body的100%是相对于html的，而html没高，结果还是0px - 某些CSS reset（如Normalize.css）会悄悄重置
html或body的height，得用开发者工具「Computed」面板确认它们的height确实是像素值，不是auto - 必须写：
html, body { margin: 0; padding: 0; height: 100%; }
Flex子项写height: 100%反而失效
一旦子元素声明了height: 100%，浏览器就认为你已接管高度控制，自动忽略align-items: stretch的拉伸行为。更麻烦的是，如果父容器高度是auto，height: 100%实际算出来就是0px，子元素直接塌陷。
- 删掉所有子元素上的
height: 100%、min-height: 100% - 想填满？优先用
flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0） - 若子元素被UI框架加了
min-height: 0（常见于button、表格行），需手动覆盖为min-height: auto或min-height: 0（视场景而定）
嵌套Flex容器时高度链在哪断的
塌陷常发生在两层以上嵌套时，表面看每层都写了flex: 1，但某一层实际拿到的是height: 0，导致后续所有flex: 1都失去意义。
- 打开开发者工具，逐级检查「Computed → height」：只要出现
auto，就说明链路上某一级断了 - 特别注意
html和body：它们默认无高度，height: 100%在它们身上没设就等于整条链归零 - 某些UI框架内部容器用了
display: inline-block或float，导致它不再是子元素的“包含块”，height: 100%自动回退到html
Safari 14–15.6和旧版Chrome的特殊坑
Safari 14–15.6存在引擎级缺陷，不把display: flex父容器识别为百分比高度的有效参照物；Chrome 49及更早版本的Blink内核也不将flex: 1撑开的父容器识别为“有高度”的参照物。
- Safari 14–15.6只认
height声明，min-height或flex: 1推导出的高度都不行 - 旧版Chrome中，唯一可靠方式是给每一层父容器显式写
height（比如height: 100vh），漏一层就整条链失效 - 这些场景下，
flex: 1比height: 100%稳定得多，但前提是父容器自身有display: flex且非auto高度
最易被忽略的不是哪一行代码写错了，而是min-height: 0这类看似无害的重置样式，在Flex场景下会卡住拉伸逻辑；还有就是开发者工具里看到的computed height是不是真实像素值——不点开「Computed」面板确认，光靠猜，永远修不对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
