flex-grow 超过 1 仅按权重比例分配剩余空间，非绝对值；值为 2 的项目分得空间是值为 1 的两倍（前提 flex-basis 相同且有剩余空间），过高值易掩盖布局问题、引发精度偏差或调试困难，推荐控制在 0–10 区间并优先用 flex-basis: 0 配合 flex-grow 实现等分。
flex-grow 超过 1 会导致子项抢占更多剩余空间
在 display: flex 容器中，flex-grow 是按「权重比例」分配剩余空间的，不是按绝对数值。值为 2 的项目拿到的空间，是值为 1 的项目的两倍——前提是它们基础尺寸（flex-basis）相同且容器有足够剩余空间。
常见误解是认为 flex-grow: 999 会“撑满一切”，其实它只是把自身权重拉高到远超其他项，导致其他 flex-grow: 1 项几乎分不到空间。但若所有子项都设成 flex-grow: 999，结果和全设 1 完全一样。
-
flex-grow只作用于「主轴剩余空间」，不改变原始内容尺寸或触发重排逻辑 - 当容器无剩余空间（所有子项已占满）时，任何
flex-grow值都无效 - 若某子项内容本身超宽（如长单词、未折行文本），
flex-grow不会压缩它；此时可能溢出或触发滚动，需配合min-width: 0或overflow-wrap: break-word
flex-grow 过大会放大 flex-basis 的偏差影响
实际分配公式是：最终尺寸 = flex-basis + (剩余空间 × flex-grow / 总权重)。如果某个子项的 flex-basis 比其他项大得多，再配上超高 flex-grow，它会吃掉不成比例的空间，甚至挤占其他本该显示的内容。
例如两个并排卡片：左侧设 flex-basis: 200px; flex-grow: 10，右侧设 flex-basis: 80px; flex-grow: 1，容器总宽 600px。左侧不仅拿到基础 200px，还会额外分得约 364px（计算后），右侧只剩约 36px —— 明显失衡。
立即学习“前端免费学习笔记（深入）”；
- 高
flex-grow会掩盖flex-basis设置不合理的问题，让布局更难调试 - 建议优先用合理
flex-basis（如flex-basis: 0配合flex-grow实现等分），再微调flex-grow权重 - 避免混合使用固定像素
flex-basis和极大flex-grow，尤其在响应式场景下容易在小屏崩溃
flex-grow 过大可能触发浏览器渲染异常或性能抖动
虽然规范没限制 flex-grow 的数值上限，但部分旧版 Chromium（如 Chrome 80–90）在遇到极大值（如 10000）时，内部浮点累加会出现精度丢失，导致剩余空间分配出现 1–2px 偏差；Safari 在某些嵌套 flex 场景下也会因权重过大而跳过优化路径，触发强制重绘。
这不是 bug，而是实现层面的数值稳定性边界。现代浏览器已大幅改善，但仍有遗留风险。
- 生产环境推荐
flex-grow控制在0–10区间内，权重大于 10 的需求，通常说明布局结构该重构了 - 用
flex-grow: 1+flex-basis: 0实现等分布局，比给每个项设不同高值更稳定 - 若真需要“强占”行为（如侧边栏固定、主内容自适应），应改用
flex: 0 0 auto/flex: 1组合，而非堆高flex-grow
/* 推荐写法：清晰、可预测、易维护 */
.sidebar {
flex: 0 0 240px; /* 不伸缩、不收缩、基准宽 240px */
}
.main {
flex: 1; /* 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0% */
}高 flex-grow 值本身不危险，但它常是布局意图模糊的信号——真正需要的往往不是“更大权重”，而是更明确的尺寸控制策略。
