CSS百分比高度需父级有确定像素高，否则恒为0px；html和body须同时设height:100%；flex:1比height:100%更可靠，不依赖父级显式高度。
父容器 computed height 是 auto，100% × 0px = 0px
子项写 height: 100% 却塌陷，不是样式写错，而是浏览器根本算不出“100%”对应多少像素——它的直接父容器在「Computed」面板里显示 height: auto，于是计算结果恒为 0px。这跟 Flex 无关，是 CSS 百分比高度的底层规则：它只认父级的**已知像素值**（如 400px、100vh），不认 auto 或内容撑开的高度。
常见现象：.main 设了 height: 100%，但高度为零；查了半天子元素，却漏掉它的父级 .layout 根本没设高。必须逐层向上检查：html → body → .wrapper → .container，任意一层是 auto，整条链就断了。
html 和 body 必须同时设 height: 100%
这是最常被跳过的源头。浏览器中 html 和 body 默认只是“包裹内容”的容器，不占满视口。如果其中任意一个的 computed height 是 auto，所有后代的 height: 100% 都失去参照系。
-
body { height: 100%; }单独写没用——因为它的 100% 是相对于html的，而html没高，结果还是0px - 必须写：
html, body { margin: 0; padding: 0; height: 100%; } - 某些 CSS reset（如 Normalize.css）或 UI 框架会悄悄重置
html或body的height，得用开发者工具「Computed」面板确认它们的height真的是像素值，不是auto
Flex 子项写了 height: 100% 反而禁用 align-items: stretch
一旦子元素声明了 height: 100%，浏览器就认为你手动接管高度控制，自动忽略默认的 align-items: stretch 拉伸行为。更麻烦的是，如果父容器高度仍是 auto，height: 100% 实际算出来就是 0px，子元素直接塌陷。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 删掉所有子元素上的
height: 100%、min-height: 100%、max-height: 100% - 想填满剩余空间？优先用
flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0） - 若父容器是
flex-direction: column，align-items: stretch控制的是宽度，和高度无关；此时必须靠flex: 1或确保祖先链有显式高度 - 嵌套 Flex 容器时，子 Flex 容器默认
min-height: auto，会阻断内部flex: 1生效，需显式加min-height: 0
flex: 1 比 height: 100% 更可靠
flex: 1 不依赖父容器有没有显式 height，它靠的是 Flex 主轴剩余空间分配逻辑；而 height: 100% 必须父容器有确定像素高，否则直接失效。
注意点：
- 父容器必须是
display: flex或display: inline-flex，否则flex: 1被忽略 - 某些 UI 框架（如 Ant Design、Bootstrap）会给按钮、表格行等加
min-height: 0，会卡住拉伸，需手动覆盖为min-height: auto - Safari 14–15.6 对
height: 100%有引擎级忽略，但flex: 1兼容性稳定得多 - 别在
iframe、canvas等替换元素上硬套height: 100%——它们自身对百分比高度支持差，且父 Flex 容器若只是height: auto，它连基准都没有
真正容易被忽略的，是嵌套 Flex 中那层看不见的 min-height: auto：外层看着有高度，内层卡片就是不等高，问题往往出在中间那个没加 min-height: 0 的子 Flex 容器上。
