flex-grow: 1 不生效主因是父容器未设 display: flex/inline-flex，或子元素被 width/min-width 等属性锁定尺寸；多子元素均设时均分空间，单设则独占剩余空间；垂直撑满需配合 flex-direction: column 及 flex-shrink: 0 等控制。
flex-grow: 1 为什么有时不生效
直接写 flex-grow: 1 却没占满剩余空间？大概率是父容器没开 Flex 布局，或者子元素被其他规则锁死了尺寸。
- 父元素必须设
display: flex或display: inline-flex，否则flex-grow完全无效 - 子元素若设置了
width、min-width、max-width（尤其min-width: auto在某些浏览器下会阻止拉伸），可能压制flex-grow - 多个子元素同时设
flex-grow: 1会均分剩余空间；只给某一个设，它才独占——但前提是其他兄弟没抢走“基础尺寸”
只让某个子元素撑满剩余高度（垂直方向）
常见于侧边栏 + 主内容区布局，想让 .main 填满父容器除去头部/底部后的所有高度。关键不是只靠 flex-grow，得配合方向控制。
- 父容器需设
flex-direction: column - 非目标子元素（如
.header、.footer）建议用固定高或flex-shrink: 0防止被压缩 - 目标子元素设
flex-grow: 1，且确保它没设height或min-height干扰计算
示例：
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.header { flex-shrink: 0; height: 60px; }
.main { flex-grow: 1; } /* 这里才真正撑满中间空隙 */
.footer { flex-shrink: 0; height: 40px; }
flex-grow: 1 和 flex: 1 的区别
很多人混用，但行为不同：后者是简写，会重置 flex-shrink 和 flex-basis，容易踩坑。
立即学习“前端免费学习笔记（深入）”；
-
flex-grow: 1只改增长权重，其余保持默认（flex-shrink: 1,flex-basis: auto） -
flex: 1等价于flex: 1 1 0—— 注意最后的0，意味着flex-basis: 0，它会忽略子元素自身内容宽度，强制从零开始分配空间 - 如果子元素是文字块或图片，用
flex: 1可能导致内容被过度挤压；只想让它“尽可能伸展”，优先用显式flex-grow: 1
IE11 下 flex-grow 不稳定怎么办
IE11 对 Flex 的实现有多个已知缺陷，比如对 flex-basis: auto 处理异常，或在嵌套 flex 容器中失效。
- 避免在 IE11 中依赖
flex-grow单独撑满；可降级为height: 100%+ 显式父级高度链 - 若必须用，给目标子元素加
flex-basis: 0（即用flex: 1），再配合min-width: 0/min-height: 0防止内容溢出干扰计算 - 测试时重点看是否出现横向滚动条或内容截断——这是 IE11 中
flex-basis: auto误算的典型表现
实际用的时候，最常漏掉的是父容器缺 display: flex，或者忘了检查兄弟元素有没有用 white-space: nowrap、float 这类破坏 Flex 流的属性。这些地方一卡住，flex-grow: 1 就彻底静音了。
