flex-grow 是剩余空间的分配比例而非百分比，数值表示相对份额比；需配合 flex-basis 控制基础尺寸，ie11 仅支持整数，且不解决内容溢出问题。
flex-grow 分数值不是权重百分比，而是剩余空间的分配比例
很多人以为 flex-grow: 2 表示“占 20%”，其实它只在有剩余空间时起作用，且数值之间是相对比例关系。比如两个子项分别设 flex-grow: 1 和 flex-grow: 3，剩余空间会被分成 4 份，前者拿 1 份，后者拿 3 份——和 25% / 75% 等价，但本质是“1:3 的份额比”，不是“1% 和 3%”。
- 如果所有子项都设
flex-grow: 0（默认值），则不放大，按内容宽度排布 - 只要有一个子项
flex-grow> 0，其他同级项即使设了flex-grow: 100，也只按比例分剩余空间，不会“抢走全部” -
flex-grow对已溢出容器的内容无效；先看是否撑满父容器，再谈“剩余空间”
侧栏 + 主区布局中，必须限制侧栏基础宽度，否则 flex-grow 会失效
常见错误是给侧栏直接写 flex-grow: 1，结果侧栏被拉得极宽。因为 flex-grow 只分配“剩余空间”，而侧栏若没设 flex-basis 或 width，其基础尺寸可能为 0，导致它疯狂扩张来填剩余空间。
- 侧栏推荐写法：
flex: 0 0 240px（即flex-grow: 0、flex-shrink: 0、flex-basis: 240px） - 主区写法：
flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0） - 如果真要让侧栏也参与弹性伸缩（比如响应式窄屏下变小），可改用
flex: 0.25+min-width: 180px，但需注意：分数值 0.25 和 1 并不等于 25% : 100%，而是 1:4 的比例
IE11 下 flex-grow 分数值行为异常，慎用小数或非整数
IE11 对 flex-grow 的解析存在兼容性问题：当值为 0.5 或 1.5 时，可能被截断为 0 或 1，导致布局错乱。生产环境若需兼容 IE11，只用整数。
- ✅ 安全写法：
flex-grow: 1、flex-grow: 2 - ❌ 风险写法：
flex-grow: 0.3、flex-grow: 1.5（IE11 中可能变成 0 或 1） - 替代方案：用整数比例模拟，如想实现 1:3，就写
flex-grow: 1和flex-grow: 3，而非0.25和0.75
flex-grow 不影响元素自身最小内容宽度，文字换行或 min-width 才是关键约束
即使给侧栏设了 flex-grow: 0 和 width: 200px，如果里面放了一长串无空格英文（如哈希 ID），它仍可能撑开容器。此时 flex-grow 没错，错在内容本身不可压缩。
立即学习“前端免费学习笔记（深入）”；
- 加
min-width: 0到侧栏，允许其收缩到内容最小宽度以下（配合overflow: hidden或text-overflow: ellipsis） - 对长文本容器加
word-break: break-all或overflow-wrap: break-word - 不要依赖
flex-grow来“强制压窄”内容；它是空间分配机制，不是内容裁剪工具
flex-basis 的隐式行为——它不像 width 那样直观，却决定了 flex-grow 是否有机会生效。 
