先记住这个答案
工具栏里某个按钮写了 flex-shrink: 0，页面不一定马上出现横向滚动。它只是声明这个按钮不承担负空间：容器够宽时根本没有负空间；不够宽时，搜索框等其他项目可能先变窄。只有这些项目碰到各自的最小尺寸，剩下的内容才会越界。排查时把所有项目外尺寸和 gap 一起算。
flex-shrink: 0不等于一定溢出- 空间足够时无须收缩
- 别的项目可能承担负空间
- 放不下时可换行、滚动或折叠
工具栏按钮保宽与横向滚动
工具栏里的图标按钮常用 flex-shrink: 0，防止窄屏把按钮压扁。按钮只有几个时没有问题；新增十个按钮后，nowrap 的单行已经放不下。此时应先确定交互需求：工具栏可以换行，就设 flex-wrap: wrap；必须保持单行，就让容器横向滚动；次要操作也可以折入更多菜单。不要只把 overflow: hidden 加上去，让按钮消失。
.toolbar {
display: flex;
flex-wrap: nowrap;
overflow-x: auto; /* 单行保留所有按钮，窄屏可滚动 */
}
.toolbar button {
flex: 0 0 auto; /* 按钮保持自身宽度 */
}示例保持单行并允许横向滚动，按钮的 flex: 0 0 auto 与滚动容器配合。
是否溢出取决于整行尺寸
Flex 先计算项目基准尺寸与容器主轴空间的差值。空间充足时根本不进入收缩分配。出现负空间时，收缩因子为零的项目保持它的目标宽度，其余项目按缩放收缩因子分担。每项还会受到最小尺寸限制，因此“别的项能收缩”也不保证整行一定放得下。溢出是这一整组尺寸约束的结果，而不是 flex-shrink: 0 单独造成的。
可以把容器宽度从 600px 逐步缩到 300px 来观察，而不是只截一张窄屏图。宽时各项目按基础尺寸排布，flex-shrink: 0 与默认值看起来一样；中间阶段，其他项目缩小，固定按钮保持宽度；当可缩项触到 min-width 下限后，整组才可能溢出。若你希望溢出后还能看到所有按钮，应给容器提供横向滚动；若不允许滚动，就需要重新考虑按钮收纳或换行。
容易答错的地方
- 认为设了零就立即溢出
- 容器有足够空间时，任何项目都不用收缩。判断时要结合容器宽度、间距和其他项目的尺寸。
- 靠隐藏溢出来修工具栏
- 裁剪只改变看见的部分，按钮仍可能无法触达。对操作控件更常见的选择是换行、滚动或折叠。
面试官还会怎么问？
flex: none 和 flex-shrink: 0 一样吗？
不一样。flex: none 同时把增长和收缩设为零，并使用自动基准尺寸；单设 flex-shrink: 0 不会取消增长。
加了 flex-wrap: wrap 后还会横向溢出吗？
仍可能。某个单独的项目宽过容器，或者有不能断行的内容和最小宽度限制，换行也装不下它。
固定按钮和文本区怎样搭配？
按钮可用 flex: none，文本区可用 flex: 1; min-width: 0。这样优先让文本区收缩，再按需要截断或换行。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。