height: 100% 失效是因为父容器 height 为 auto，无像素基准可继承；flex: 1 可行因其基于剩余空间分配而非高度继承，且需父容器 display: flex、有确定高度、子元素无 min-height 阻断。
因为父容器的 height 是 auto，子元素的 height: 100% 实际算出来是 100% × 0px = 0px —— 不是 Flex 有问题，是 CSS 百分比高度根本没计算基准。
为什么 height: 100% 在 Flex 子项里总算不出像素值
浏览器查的是**直接父元素的 computed height**，不是“看起来有没有高度”。Flex 容器默认就是 height: auto，哪怕它被内容撑开了，在 Computed 面板里显示的仍是 auto，子元素就拿不到任何可乘的数值。
- 用开发者工具选中父容器 → 看 Computed 面板里的
height：如果是auto，链就断了；如果是500px或100vh，才说明有值可继承 -
html和body必须显式设height: 100%或min-height: 100vh，否则整条链在起点就断了 - 某些 CSS reset（如 Normalize.css）会重置
html或body的height，你写了也白写
为什么 flex: 1 能行，而 height: 100% 不行
flex: 1 不依赖父容器的像素高度，它靠的是 Flex 主轴剩余空间分配逻辑；height: 100% 是纯继承行为，必须父级有确定高度，否则直接退化为内容撑开。
-
flex: 1等价于flex: 1 1 0，关键在flex-basis: 0：从零开始分剩余空间，不依赖初始高度 - 父容器是
flex-direction: column且有固定高 header/footer 时，中间区域用flex: 1就能自动填满，不用管html/body是否设高 - 别同时写
flex: 1和height: 100%：语义冲突，Chrome 可能忽略height，Safari 14–15.6 甚至可能直接跳过整个声明
嵌套 Flex 容器中子元素高度失效的隐藏原因
当子元素本身也是 Flex 容器时，现代浏览器（Chrome 80+、Firefox 68+、Safari 14.1+）会给它默认加 min-height: auto —— 这会阻止它向下传递拉伸能力，导致内部的 flex: 1 区域无法塌下来占满空间。
- 必须手动给嵌套的子 Flex 容器加
min-height: 0，才能解锁拉伸权限 - 检查是否误加了
align-self: flex-start或align-self: center：这些会覆盖align-items: stretch，让子元素退出拉伸队列 - 绝对定位子元素（
position: absolute）完全脱离 Flex 流，align-items对它无效；要用inset: 0或top/bottom/left/right: 0配合position: relative父级
图片等行内元素引发的高度断裂
默认行内级 <img> 元素存在基线对齐（vertical-align: baseline），会在下方留约 4px 隐式间隙，参与行盒高度计算，导致父容器被“撑高”，而图片自身并未真正拉伸到容器顶底。
- 给
<img>加vertical-align: top或vertical-align: middle可彻底解决 - 或者统一设
display: block，直接移除行内特性 - 这个间隙不显眼，但足以破坏整条高度链的像素一致性，尤其在需要精确对齐的图文区块中
最常被忽略的一点：即使你写了 flex: 1，只要父容器没设 display: flex、或父容器自身高度仍是 auto 且无上层支撑、或子元素被框架悄悄加了 min-height: 0，它照样不会撑开——这三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
