先记住这个答案
margin: auto 和 flex-grow 都想要剩余空间，但规范规定 auto margin 先结算。如果一个子项同时设了 flex-grow: 1 和 margin-left: auto，auto margin 会先把左侧的剩余空间全吃掉，flex-grow 拿到的剩余空间是 0，子项宽度不会增长。当子项总尺寸溢出容器时，剩余空间为负，auto margin 变成 0，flex-shrink 正常收缩。
- auto margin 比
flex-grow先结算 - auto margin 吃完空间后 grow 无效
- 溢出时 auto margin 变成 0
- 自动边距不改变收缩因子
为什么 auto margin 会「吃掉」flex-grow 的空间
浏览器处理 flex 布局分几步：先算每个子项的 flex-basis 尺寸，然后处理 auto margin，最后才用 flex-grow 分配剩余空间。auto margin 在第二步就把空间分完了，到第三步 flex-grow 看到剩余空间是 0，自然不会给子项加宽度。
flex-grow 不生效CSS.container {
display: flex;
width: 600px;
}
.item {
flex-grow: 1; /* 想吃剩余空间 */
flex-basis: 100px;
margin-left: auto; /* 先把左侧空间吃完 */
}
/* 子项宽度仍然是 100px */
/* margin-left 吃掉了 500px */如果把 margin-left: auto 去掉，子项会通过 flex-grow 拉伸到 600px。但有了 auto margin，剩余空间被 margin 吃掉，flex-grow 无事可做。
溢出时 auto margin 变成 0
当所有子项的 flex-basis 总和超过容器宽度时，剩余空间为负。这时候 auto margin 不会变成负值（不像普通 margin 可以是负数），而是直接变成 0。flex-shrink 照常收缩子项尺寸。
这就是为什么有时候你设了 margin: auto 但看不到效果——子项已经把容器填满甚至溢出了，auto margin 无处可去。
实际项目中两者应该怎么选
一般不会同时用 flex-grow 和 margin: auto，因为它们的目的不同。flex-grow 用来让子项按比例填满空间，margin: auto 用来把子项推到某个方向。
比如导航栏里把「登录」按钮推到最右边，用 margin-left: auto 就够了，不需要 flex-grow。如果想让几个子项平分空间，用 flex-grow: 1，不需要 auto margin。两者混用反而让布局变得难以预测。
容易答错的地方
- 以为
flex-grow优先级更高 - 很多人以为
flex-grow是 flex 布局的核心属性应该优先级最高。实际上 auto margin 先结算，flex-grow只能分配 auto margin 剩下的空间。 - 以为溢出时 auto margin 会变成负值
- auto margin 不会为负。溢出时它直接变成 0，不会从子项身上扣空间。负空间由
flex-shrink处理。
面试官还会怎么问？
多个子项都设了 margin: auto 怎么分？
剩余空间在所有 auto margin 之间平分。比如三个子项都设了 margin-left: auto，剩余空间平均分成三份，每个子项左边各得一份。
justify-content 和 margin: auto 冲突时谁赢？
auto margin 赢。只要有任何一个子项设了 auto margin，justify-content 就完全失效。因为 auto margin 先把剩余空间吃完了，justify-content 没有空间可分配。
怎么在不影响 flex-grow 的前提下推开子项？
用 gap 属性。gap 设的是子项之间的固定间距，不会和 flex-grow 争抢剩余空间。flex-grow 分配的是减去所有 gap 之后的剩余空间。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。