height: 100%在Flex容器中不生效是因为父容器默认height: auto，导致百分比无计算基准；flex: 1通过flex-basis: 0从零拉伸，依赖剩余空间而非父级显式高度，更可靠且兼容性更好。
为什么height: 100%在 Flex 容器里总不生效
因为height: 100%需要一个明确的“计算基准高度”，而 Flex 容器默认是height: auto——它不主动声明高度，只按内容撑开。子元素写height: 100%时，浏览器算的是“100% of auto”，结果就是0px。这不是 bug，是 CSS 百分比高度的底层规则。
flex: 1比height: 100%更可靠的原因
flex: 1展开后其实是flex-grow: 1; flex-shrink: 1; flex-basis: 0。关键就在flex-basis: 0：它让元素从零开始拉伸，完全无视内容原始高度，只认父容器剩余空间。而height: 100%必须依赖父容器已有高度值，一环断就全崩。
- 父容器是
display: flex; flex-direction: column，且有固定高头部和底部时，中间区域用flex: 1就能自动填满，不用管html/body有没有设高 - 如果子项本身有内容（比如一段文字），
flex-basis: 0可能被min-height: auto压制，导致还是“塌缩”——此时加min-height: 0才能真正解锁拉伸 -
flex: 1在 Safari 14–15.6 中兼容性远好于height: 100%，后者在这些版本里常被直接忽略
flex-basis设成0还是auto？看你要不要保留内容基线
默认flex: 1隐含flex-basis: 0，适合“清空起点、全力填充”的场景；但如果你希望子项至少保持内容高度（比如一个卡片里有标题+列表，不想被压扁），就该显式写flex: 1 1 auto。
-
flex: 1 1 0：从零拉伸，最彻底的“撑满剩余空间” -
flex: 1 1 auto：以内容高度为起点，再往上涨，适合内容重要性高于空间分配的 UI - 别混用：
flex-basis: 0+height: 100%没意义，后者会被 Flex 布局逻辑覆盖
容易被忽略的三个硬性前提
哪怕写了flex: 1，只要下面任一条件不满足，它照样不撑开：
- 父容器没设
display: flex或display: inline-flex——flex属性在非 Flex 容器里等于不存在 - 父容器自身高度为
auto且无min-height、height或上层flex: 1支撑，导致“剩余空间”为0 - 子元素被框架或重置样式悄悄加了
min-height: 0（比如某些 UI 库对button的处理），这个值会卡住拉伸，得手动覆盖成min-height: auto或删掉
真正的难点不在写哪行代码，而在判断“当前这个flex: 1到底有没有可分配的空间”——打开开发者工具，逐级看Computed → height，只要出现auto，就说明链路上某一级断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
