先记住这个答案
手机页头写着 flex-wrap: nowrap，搜索框变窄而不是马上滚动，是因为单行 Flex 仍会分配负空间。允许收缩的项目先按 flex-shrink 和基础尺寸承担挤压，直到碰到最小尺寸；之后放不下的部分才溢出。想让按钮保持原宽、搜索框缩小，就要分别检查它们的收缩系数与最小宽度，而不是只改 nowrap。
nowrap禁止换线但不禁止收缩- 负空间先由可收缩项目承担
- 最小尺寸卡住后仍可能溢出
wrap会先分线再各线伸缩
手机页头搜索框被挤窄
页头同时放 logo、搜索框和几个按钮。桌面上它们排成一行；手机上搜索框先变窄，接着因为输入框的最小宽度和按钮的固定尺寸，整行仍向右溢出。此时可把搜索框所在的 Flex 项设 min-width: 0，同时给操作区设计收纳方式。切到 flex-wrap: wrap 也可以，但导航会变成多行，是否合适取决于页面结构。
.header { display: flex; flex-wrap: nowrap; gap: 12px; }
.logo, .actions { flex: none; }
.search {
flex: 1 1 240px;
min-width: 0; /* 允许搜索区先收缩 */
}
.search input { width: 100%; }搜索区先收缩；若固定区域总宽太大，单行布局仍可能溢出。
单行也会执行收缩分配
单行时，Flex 算法会计算基准尺寸之和与容器内宽的差值。负空间按收缩因子和基准尺寸共同影响的权重分配，之后再遵守每项最小最大尺寸。换行时，项目先被分配到各条线，线内再各自伸缩；因此两个模式的结果不是“同样先缩到底，wrap 再换行”这么简单。overflow-x 决定溢出的显示或滚动方式，不决定项目能否换行。
排查时可以把页头拆成头像、搜索框和按钮三项，先看每项的 flex-basis、flex-shrink，再看搜索框的 min-width。若头像和按钮都不缩，搜索框会承担大部分负空间；若搜索框自身仍有默认的内容最小宽度，就算收缩因子是 1 也可能挤出屏幕。给搜索框外层设 min-width: 0 后，它能变窄；要让输入内容保持可编辑，再检查 <input> 自己的宽度，而不是直接把整行裁掉。
同样的三个项目切成 wrap 后，浏览器会先按假设尺寸尝试分行，各行再各自算伸缩；不会先把搜索框无限压窄，等实在放不下才换行。这个顺序差异解释了为什么把 nowrap 改成 wrap 后，某些项目宽度会突然变回接近基础尺寸。
容易答错的地方
- 认为
nowrap会禁用收缩 - 它只禁止形成多条 Flex 线，收缩规则照常执行。
- 认为
wrap能拆开超宽的单个项目 - 换行只能把项目移到下一行，单个项目自身太宽仍可能溢出。
面试官还会怎么问？
怎样让按钮保持宽度、搜索框优先收缩？
按钮设 flex: none，搜索区设允许收缩的 flex，必要时在搜索区设 min-width: 0。
overflow-x: auto 会让项目换行吗？
不会。它只让横向溢出的内容可滚动；换行由 flex-wrap 控制。
为什么设了 flex-shrink: 1 仍然溢出？
可能碰到了自动最小尺寸、显式 min-width，或剩余不可收缩项目总宽度已超过容器。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。