flex-grow: 1 可让子元素均分父容器剩余宽度，前提是父容器设 display: flex、子元素无固定宽（如 width 或 flex-basis 干扰），且需注意 white-space、min-width:auto 等隐性限制。
flex-grow 怎么让子元素撑满父容器剩余宽度
直接用 flex-grow: 1 就能实现自动扩展，但前提是父容器必须是 display: flex，且子元素不能有固定宽度（如 width 或 flex-basis 覆盖默认值）干扰伸缩逻辑。
常见错误是给子元素设了 width: 100% 或 flex-basis: 100%，这会让 flex-grow 失效——它只作用于“剩余空间”，不是覆盖已有尺寸。
-
flex-grow: 1表示按比例分配剩余空间，多个子项都设为 1 就均分；设为 2 就占两倍份额 - 如果父容器有 padding 或子项有 margin，它们不参与 flex 剩余空间计算，但会影响视觉对齐，建议用
box-sizing: border-box统一处理 - 避免同时设置
flex: 1和单独的flex-grow，flex是简写，会覆盖其他 flex 属性
为什么设置了 flex-grow 还不扩展？检查这三点
多数时候不是语法错，而是布局上下文没满足 flex 的前提条件：
- 父容器缺失
display: flex或display: inline-flex - 子元素被
white-space: nowrap+ 长文本卡住（flex 不会折行，内容溢出时也不触发 grow） - 存在
min-width: auto（浏览器默认值）在某些场景下限制收缩，可显式设min-width: 0解决
尤其注意：表格、绝对定位、浮动元素内部无法触发 flex 布局，flex-grow 在这些上下文中完全无效。
立即学习“前端免费学习笔记（深入）”；
和 width: 100%、flex-basis: 100% 的关键区别
width: 100% 是相对于父容器 content box 计算的固定尺寸，不响应兄弟元素变化；flex-basis: 100% 是初始主轴尺寸，设成 100% 后就没“剩余空间”留给 flex-grow 分配了。
真正自适应的组合是：flex: 1（等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0），其中 flex-basis: 0 是关键——它把初始宽度归零，把全部空间交给 flex-grow 分配。
.container {
display: flex;
}
.item {
flex: 1; /* 推荐写法 */
}
.another-item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0; /* 手动写全也行，但别漏这个 */
}响应式场景下 flex-grow 的兼容性注意点
现代浏览器都支持 flex-grow，但 IE10/11 对 flex: 1 解析有偏差，建议加前缀或改用 flex: 1 1 0 显式声明。移动端 Safari 旧版本（iOS min-width: 0 在 flex 子项中的表现不稳定，遇到文字溢出问题时优先试 overflow: hidden + text-overflow: ellipsis 组合。
复杂布局中，如果父容器宽度本身靠 JS 动态计算（比如 resize 监听后设 width），记得触发 flex 重排——通常不需要手动干预，但若用了 transform 缩放容器，flex 子项可能不会重新计算剩余空间，这时得强制重绘（例如 toggle class 或修改 visibility）。
