flex: 1是唯一可靠解，因其不依赖父容器计算高度值，而是由flex引擎动态分配剩余空间；而height: 100%要求整条祖先链每层均有明确高度，任一环节为auto即断链失效。
必须用 flex: 1，且父容器得是 display: flex + flex-direction: column + 有明确高度约束；height: 100% 在 Flex 容器里基本无效，尤其嵌套后大概率失效。
为什么 flex: 1 是唯一可靠解
它不依赖父容器的“计算高度值”，而是由 Flex 布局引擎动态分配剩余空间。而 height: 100% 要求整条祖先链上每个父级都明确设了 height（比如 100vh 或具体像素），只要中间某一层是 height: auto，就会断链失效。
flex: 1 等价于 flex: 1 1 0，其中 flex-basis: 0 是关键：它让元素从零开始拉伸，避免内容本身撑高干扰分配。
- 只写
flex-grow: 1不够——默认flex-basis: auto，内容一多就撑开，填不满剩余空间 - 父容器必须有
display: flex和flex-direction: column（垂直场景），且有明确高度约束（如height: 100vh或min-height: 500px） - 子元素自身若有图片、段落或内联内容，浏览器默认加
min-height: auto，会锁死收缩 → 必须显式加min-height: 0
flex: 1 不生效的三个高频原因
不是属性写错了，而是上下文没配齐：
-
display: flex没写在父容器上——flex: 1在非 Flex 容器中完全被忽略 - 父容器高度为
auto且无min-height/height，导致“剩余空间”为 0 - 子元素有默认
min-height: auto，内容少时 Flex 拒绝压缩 → 必须加min-height: 0解锁收缩能力
滚动内容区域必须加 overflow-y: auto 和 min-height: 0
只填满还不够，内容超长时得能滚动，且不能因内联内容或图片卡住高度：
-
overflow-y: auto比scroll更合理：有内容溢出才显示滚动条，避免空滚动条干扰视觉 -
min-height: 0必须显式设置——否则即使flex: 1生效，内部一个图片或段落也可能把整个区域顶高，破坏“填满剩余”的预期 - 如果父容器用了
border或padding，记得用box-sizing: border-box，否则视觉上会“撑出”边界
别碰 calc(100vh - xxxpx) 这种硬编码方案
它看似直观，但实际维护成本极高：
- 每次
header/footer高度微调、padding变更、甚至加个边框，都要重算并改 CSS - 在 iOS 软键盘弹出时，
100vh会缩，100dvh更稳，但calc无法响应这种变化 - 嵌套组件中，父层高度不可控时，
calc直接失效，而flex: 1仍可逐层向下传递剩余空间
真正难的不是写对那行 flex: 1，而是检查每一层父容器是否都满足“有方向、有高度、有上下文”这三个条件——漏掉任意一个，就卡在 computed height: auto 上，再也撑不开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
