height: 100% 在 flex 子项中不生效的根本原因是父容器无明确高度，导致百分比失去参照系；需配合 min-height: 0、flex: 1 或 height: stretch 等显式拉伸策略才能生效。
为什么 height: 100% 在 Flex 子项里不生效
根本原因不是浏览器 Bug，而是 CSS 规范行为：百分比高度依赖父级有**明确可计算的高度**（如 px、vh、或由 flex: 1 显式撑开），而 Flex 容器默认 height: auto，子项写 height: 100% 就失去参照系。
Chrome（尤其 72+）严格遵循规范，会把 flex: 1 子项的 min-height 默认设为内容最小高度（即“不塌陷但也不拉伸”），此时 height: 100% 仍无效——它只管“设定值”，不管“是否拉伸”。
-
min-height: 0是关键干扰项：很多 UI 框架或重置样式会加这句，它会阻止子项被align-items: stretch拉伸，必须显式覆盖为min-height: auto或删掉 - 父容器若用了
flex-direction: column，子项的“高度自适应”靠的是主轴方向上的flex: 1，不是交叉轴的align-items -
align-self: flex-start或height: auto等显式声明，会直接覆盖默认的stretch行为
min-height 怎么设才真正起作用
单纯加 min-height: 100% 不解决问题——它只是“至少高到 100%”，但父级没高，它还是算不出来。真正起效的是组合策略：
- 确保整条高度链都有明确高度：至少
html, body { height: 100%; }，再给 Flex 容器加height: 100vh或flex: 1 - Flex 容器本身需显式参与高度分配：比如外层是
display: flex; flex-direction: column;，则直接给子项设flex: 1，而非height: 100% - 若必须用
height: 100%（例如内部嵌套非 Flex 元素），则在子项上强制重置拉伸阻断项：min-height: 0; align-self: stretch; - 注意
box-sizing: border-box影响：padding/border 会挤占内容区，height: 100%算的是包含盒总高，容易溢出
Chrome 72+ 的 min-height: auto 行为差异
Chrome 72 起按规范修正了 Flex 子项的默认 min-height 计算逻辑：它不再无条件拉伸，而是优先尊重内容最小高度。这意味着：
- 即使父容器有
flex: 1，子项若有文字或图片等固有内容，min-height就是那个内容高度，height: 100%仍不会覆盖它 - 解决方案不是“修复 Bug”，而是主动干预：
min-height: 0可以释放拉伸权限，但必须配合flex: 1或align-self: stretch才生效 - 测试时别只看 Chrome：Safari 对
height: 100%在 Flex 内的表现更保守，flex: 1兼容性远好于百分比高度
替代方案：height: stretch 是不是更简单
是的，但得看浏览器支持。CSS height: stretch（2025 年 6 月 Chromium 正式支持）能直接让元素“像在 Flex/Grid 里一样自动填满”，无需管父级有没有高：
- 目前仅 Chromium 系（Chrome、Edge、Opera）稳定支持，Safari 和 Firefox 还在跟进中
- 它等价于老式写法：
-webkit-fill-available（Chrome/Safari）和-moz-available（Firefox），但写height: stretch更干净 - 实际项目中，如果目标用户基本用 Chrome，可试：
.child { height: stretch; min-height: 0; }；否则仍推荐flex: 1为主流解法
真正容易被忽略的点是：min-height: 0 必须加在**要拉伸的那个子元素上**，而不是父容器；而且它和 flex: 1 不冲突，可以共存——前者释放拉伸权限，后者提供增长能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
