flex-grow未生效的主因是子元素设置了width或flex-basis等固定尺寸，抢占了剩余空间；其比例分配依赖flex-basis（默认auto）与剩余空间按系数切分，非简单除法；ie11存在兼容性问题，需设明确宽度或降级为calc。
flex-grow 为什么没让子元素按比例变宽
常见错误是给子元素设了 width 或 flex-basis，比如 width: 100px 或 flex-basis: 200px，这时 flex-grow 会失效——它只在“剩余空间”上起作用，而固定尺寸会抢占空间，导致比例计算被绕过。
- 确保父容器是
display: flex，且没设flex-wrap: wrap（换行会干扰主轴剩余空间计算） - 子元素避免显式设置
width、min-width、flex-basis（除非你明确想覆盖默认行为） - 如果必须设基础尺寸，用
flex: 1 1 auto或flex: 0 0 auto显式控制伸缩性，比单独写flex-grow更安全
flex-grow: 2 和 flex-grow: 1 真的是 2:1 吗
不是简单除法。实际分配逻辑是：先按 flex-basis（默认为 auto，即内容宽度）占位，再把剩余空间按 flex-grow 系数切分，最后加到各自基础上。
- 若所有子元素内容宽度一致（比如都是空
div），那flex-grow: 2和flex-grow: 1确实接近 2:1 - 若一个子元素内容很宽（如长文本或图片），它的
flex-basis大，即使flex-grow小，最终宽度也可能更大 - 想严格按系数分配？统一设
flex-basis: 0，例如flex: 2 1 0和flex: 1 1 0，这样起点归零，增长才纯粹按系数来
IE11 下 flex-grow 行为异常怎么办
IE11 对 flex-grow 的实现有 bug：当父容器宽度未明确定义（比如靠内容撑开），或子元素含内联元素时，增长系数可能被忽略，全部子元素等宽。
- 强制父容器有明确宽度，比如
width: 100%或min-width: 0（配合flex-shrink使用） - 避免子元素第一级子节点是纯文本或
inline元素；加一层display: block包裹可缓解 - 更稳妥的降级方案：用
flex: 0 0 calc(66.666%)+flex: 0 0 calc(33.333%)替代flex-grow，虽失去弹性但兼容性确定
flex-grow 配合其他 flex 属性容易混淆的点
flex-grow 从不单独生效，它和 flex-shrink、flex-basis 绑定在 flex 简写里。漏写或错序会导致意外行为。
立即学习“前端免费学习笔记（深入）”；
-
flex: 1等价于flex: 1 1 0（注意是0，不是auto），这和直觉不符 -
flex: auto是flex: 1 1 auto，此时flex-basis由内容决定，增长才真正“按需” - 用
flex-grow单独写时，flex-shrink默认为1，但若父容器空间不足，子元素可能被压缩——这不是flex-grow的锅，而是flex-shrink在起作用
最常被忽略的是：flex 布局中“比例”不是绝对值，它依赖于容器尺寸、内容尺寸、收缩行为三者共同作用。调一个 flex-grow 数字前，先看 flex-basis 是多少，再确认有没有其他元素在抢空间。
