flex容器height: 100%失效的根本原因是父级高度为auto，需确保html、body及所有中间父元素均有明确像素高度；flex: 1更可靠，因其依赖剩余空间而非父级高度。
Flex容器本身设了height: 100%却没撑开，根本不是写错了，而是它压根没拿到可计算的高度值——它的父级computed height是auto，所以100% × 0px = 0px。
检查html和body是否显式设了height: 100%
这是最常被跳过的源头。浏览器里html和body默认不占满视口高度，它们只是“包裹内容”的容器。如果其中任意一个的computed height是auto，整条链就断了。
- 必须同时写：
html, body { margin: 0; padding: 0; height: 100%; } - 仅写
body { height: 100%; }不够，因为body的100%是相对于html的，而html没高，body的100%还是0px - 某些CSS reset（如Normalize.css）会悄悄重置
html或body的height，得用开发者工具的「Computed」面板确认它们的height确实是像素值，不是auto
Flex容器自身是否被上层元素撑出明确高度
即使html和body都设了height: 100%，中间某层父容器用了display: inline、position: absolute或float，也会让包含块失效，导致height: 100%回退到视口或直接退化为auto。
-
display: inline、display: table-cell、display: float的父元素无法作为有效包含块，子元素的百分比高度会跳过它往上找 -
position: absolute元素的包含块是最近的position: relative/absolute/fixed祖先，不是视觉父级；若没找到，就按视口算 - 用开发者工具逐层点开目标Flex容器及其所有父级，在「Computed」面板里查
height：只要出现auto，就说明这一层断了
为什么flex: 1比height: 100%更可靠
flex: 1不依赖父容器有没有显式height，它靠的是Flex主轴剩余空间分配逻辑。而height: 100%必须父容器有确定像素高，否则直接失效。
-
flex: 1展开后是flex-grow: 1; flex-shrink: 1; flex-basis: 0，从零开始拉伸，只认剩余空间 - 父容器必须是
display: flex或display: inline-flex，否则flex: 1直接被忽略 - 子元素若被UI框架加了
min-height: 0（常见于button、表格行），会卡住拉伸，需手动覆盖为min-height: auto - 在Safari 14–15.6中，
height: 100%常被引擎级忽略，但flex: 1兼容性稳定得多
iframe或嵌套非Flex子元素时别硬套height: 100%
比如在Flex容器里放<iframe></iframe>，给它写height: 100%几乎必然失败——因为iframe自身渲染逻辑对百分比高度支持差，且父Flex容器若只是height: auto，它连基准都没有。
- 正确做法：移除
iframe上的所有height声明，让它成为Flex子项，并加flex: 1 - 确保父Flex容器有明确高度来源，例如
height: 100vh或由上层flex: 1撑开 - 避免混用：
flex: 1和height: 100%同时写，Chrome可能优先走Flex规则，height被覆盖；Safari旧版可能直接忽略整个声明
真正卡住人的，从来不是“该写哪行代码”，而是没打开开发者工具，逐层点开看computed height到底是不是像素值。Flex布局下，高度链比宽度链脆弱得多，任何一层auto都会让整条链失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
