flex-grow: 1 并非自动填满，需父容器设 display: flex、明确主轴尺寸（如 height: 100dvh）、正确 flex-direction，且子项无 height/min-height 等刚性约束；推荐用 flex: 1 替代。
flex-grow: 1 不是“自动填满”的魔法开关，它只在父容器提供可计算的剩余空间时才生效；绝大多数 Content 区域填不满，根本原因不是写错了 flex-grow: 1，而是父级尺寸链断了。
父容器没设 display: flex 或 flex-direction，flex-grow 完全不解析
Flex 属性只对 Flex 项目（即 display: flex 容器的直接子元素）有效。如果中间嵌套了一层普通 div，比如：
.layout { display: flex; flex-direction: column; height: 100vh; }
.content-wrapper { /* 没设 display: flex */ }
.content { flex-grow: 1; }
那么 .content 的父级是 .content-wrapper，而它不是 Flex 容器——flex-grow: 1 直接被浏览器忽略，等同于没写。
- 检查 DOM 结构：从根容器到目标
.content，每一层都必须显式声明display: flex或display: inline-flex - 垂直填充场景下，必须加
flex-direction: column，否则主轴仍是水平方向，flex-grow作用在宽度上，对高度无效 - 别依赖“继承”或“隐式 flex”——CSS 中没有这回事
父容器高度为 auto 或未设明确主轴尺寸，没有“剩余空间”可分配
flex-grow 的计算逻辑是：容器主轴尺寸 − 所有兄弟元素的 flex-basis（或内容尺寸）之和。如果父容器高度是 height: auto，它的高度就由子内容撑开，结果就是“没剩余”，flex-grow: 1 无空间可长。
- 填高场景必须给父容器设确定高度，例如
min-height: 100dvh（推荐）、height: 500px或min-height: 100vh（注意 Safari 软键盘缩放问题） -
100vh在 iOS Safari 弹出软键盘时会失效，改用100dvh更可靠（2023 年起主流支持） - 避免在父容器上同时设
align-items: stretch和子项设height，二者冲突会导致高度计算异常
子元素自身限制覆盖了 flex 分配逻辑
即使父容器一切正常，.content 自身的 CSS 也可能阻止它伸展：
- 写了
height、min-height或max-height：这些属性优先级高于flex-grow，会锁死高度 - 没重置
flex-basis：单独写flex-grow: 1时，flex-basis默认是auto，意味着它先按内容高度起步，再分剩余——如果内容本身很高，可能已占满容器，没空间可分 - 文本类内容未防溢出：长单词或 URL 会撑破容器，建议加
min-width: 0或overflow: hidden配合flex-grow - 内部嵌入了固定尺寸组件（如
<iframe></iframe>、第三方地图控件）：它们拒绝收缩/拉伸，破坏 flex 布局流
用 flex: 1 替代 flex-grow: 1 更稳妥
flex: 1 是简写，等价于 flex: 1 1 0%，其中 flex-basis: 0% 关键——它让元素“从零开始按比例分空间”，而不是先按内容占位再分配。这对 Content 区域尤其重要。
- 写
.content { flex: 1; }比flex-grow: 1更少踩坑，语义更清晰 - 多个同级区域均分？都写
flex: 1；想按 2:1 分配？用flex: 2和flex: 1 - 别混用
width和flex-basis：当flex-basis不为auto时，width会被忽略（flex-basis优先级更高）
真正卡住人的从来不是 flex-grow: 1 这行代码本身，而是它对整条父级尺寸链的强依赖：任意一层漏掉 display: flex、错设 flex-direction、忘了给高度、或子项自己加了刚性约束，都会让这个“填满”动作彻底静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
