flex-grow:1仅对flex项目生效，需父容器有明确宽高约束且子项设该属性；常见失效原因包括误设于容器、父容器高度为auto、未设flex-basis:0等。
flex容器本身不占满父容器时，flex-grow: 1 没用
很多人试了 flex-grow: 1 发现没反应，根本原因是：这个属性只对 flex 项目（flex item） 生效，不是给 flex 容器（即设了 display: flex 的那个元素）用的。想让某个子元素撑开填满剩余空间，得把它作为 item 去设置 flex-grow: 1，而不是在容器上设。
常见错误场景：
- 给容器加了
display: flex，又顺手给它加flex-grow: 1—— 这个值被忽略 - 父容器没有明确高度（比如
height: auto），导致“剩余空间”根本不存在 - 容器有
flex-direction: column，但忘了子元素需要能沿主轴伸展（此时需确保父容器有高度约束）
父容器没高度，flex-grow 就是摆设
Flex 布局中，“剩余空间”是算出来的：父容器尺寸减去所有非弹性项目的固有尺寸。如果父容器高度是 auto（比如默认的块级元素），那它只会包住内容，没多余空间可分。
必须确保父容器有明确的高度来源，例如：
-
height: 100vh（全屏高） -
height: calc(100% - 60px)（配合其他元素留白） - 父级设置了
display: flex; flex-direction: column;且自身有高度 - 使用
min-height代替height更稳妥，避免内容超长时溢出
填满剩余高度时，flex-grow 和 flex-basis 要一起看
flex-grow 决定“分多少”，但怎么分，还取决于 flex-basis（默认是 auto）。如果子元素自带高度（比如写了 height: 200px），flex-grow: 1 仍会从 200px 开始拉伸；如果希望它完全从零开始占满，得显式设 flex-basis: 0。
典型写法：
flex: 1 0 0;
等价于：
flex-grow: 1-
flex-shrink: 0（防止压缩） -
flex-basis: 0（清空原始尺寸，让增长真正从“无”开始）
不写 flex-basis: 0 时，浏览器按内容高度起步分配，容易误判“已占满”。
多列布局里填满宽度，flex-grow 同样依赖父容器宽度约束
横向布局（flex-direction: row）下，如果父容器宽度不定（比如 width: auto 或浮动中），flex-grow: 1 也可能失效或表现异常。
关键检查点：
- 父容器是否被其他 CSS（如
float、position: absolute）抽离了文档流？ - 是否有
white-space: nowrap或min-width类属性把容器撑宽，挤占了“剩余空间” - 多个
flex-grow: 1元素之间会等分剩余空间；若想某一个占更多，改用不同数值（如flex-grow: 2vsflex-grow: 1）
最常被忽略的是：flex 容器的“剩余空间”永远是动态计算的，它不记住你想要什么，只忠于当前尺寸和子项初始尺寸。哪怕只差一个像素的 border 或 padding，都可能让计算结果偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
