flex-grow 按容器剩余空间而非自身宽度分配，公式为“剩余空间 ×（自身值／总和）”，且必须以 flex-basis 为起点；设 flex-basis: 0 才能实现严格比例分配。
flex-grow 计算时到底用谁当基数
它不是按子元素自身宽度算的，而是用「容器剩余空间」除以所有 flex-grow 总和，再按各自权重分配。很多人误以为 flex-grow: 2 就是“比 flex-grow: 1 宽两倍”，其实前提是它们基础尺寸（flex-basis）相同且容器有剩余空间。
常见错误现象：flex-grow 完全没反应，或比例严重偏离预期——大概率是子元素设置了固定宽高、flex-basis 为 auto 但内容撑开了尺寸、或父容器没设 display: flex。
-
flex-grow只在容器主轴有剩余空间时生效；如果子元素总宽已超容器，它不起作用 - 真实分配公式是：
剩余空间 × (自身 grow 值 / 所有 grow 值之和)，不是简单乘法放大 -
flex-basis默认是auto，此时浏览器先按内容宽度计算“基础尺寸”，再拿剩余空间去分——这才是比例失真的主因
想让 flex-grow 按比例严格瓜分容器，必须重置 flex-basis
只要不显式设 flex-basis，flex-grow 就会受内容宽度干扰。比如一个空 <div> 和一个含长文本的 <code><div> 同时设 <code>flex-grow: 1，后者实际宽得多。
使用场景：卡片栅格、表单左右布局、响应式侧边栏+主内容区。
立即学习“前端免费学习笔记（深入）”；
- 统一设
flex-basis: 0，强制从零开始按flex-grow分配剩余空间 - 配合
min-width: 0防止内容溢出破坏布局（尤其内含长单词或 URL 时） - 别写
flex: 1简写——它等价于flex: 1 1 0%，0%在某些浏览器里仍可能触发内容测量，稳妥起见直接写flex: 1 1 0或拆开写
放大比例错觉：css 缩放和 flex-grow 的根本区别
你问的“放大比例”，其实混淆了两个机制：transform: scale() 是视觉缩放，不影响文档流和布局计算；而 flex-grow 是真实改变元素占用的主轴尺寸，会影响后续兄弟元素位置和容器高度。
性能影响：大量使用 transform: scale() 触发 GPU 加速，滚动更顺；flex-grow 是纯 layout 计算，无额外开销，但若频繁增删子元素或改 grow 值，会触发重排。
- 如果目标是“看起来更大”，优先用
transform: scale(1.2)+transform-origin控制锚点 - 如果目标是“占更多空间并推挤其他元素”，必须用
flex-grow，且确认flex-basis已归零 -
scale()放大后文字会模糊，flex-grow放大后字体大小不变，只是容器变宽——这是最常被忽略的视觉差异
兼容性与 flex-grow 值为 0 的陷阱
flex-grow: 0 不等于“不生长”，而是“不参与剩余空间分配”，但它仍受 flex-basis 和内容影响。IE10–11 对 flex-grow 支持不完整，尤其在 flex-direction: column 下容易失效。
错误现象：flex-grow: 0 的元素仍然占满容器宽度，或在 safari 旧版本中完全不收缩。
- IE 下必须加
-ms-flex-positive: 0才能真正禁用生长 -
flex-grow: 0+flex-basis: auto仍可能比flex-grow: 1的元素宽——因为前者按内容定宽，后者从零开始分剩余空间 - 真要“绝对不占额外空间”，除了
flex-grow: 0，还得确保flex-basis足够小，或用width+flex-shrink: 1组合控制
事情说清了就结束。关键就两点：flex-grow 生效的前提是容器有剩余空间，以及它的分配基数永远是 flex-basis 决定的“起点”，不是元素当前渲染宽度。