flex-wrap: nowrap是默认值，但可能被覆盖；子项溢出不滚动需同时满足：父容器有明确宽度、overflow-x: auto及子项flex-shrink: 0；长文本撑宽需设min-width: 0并避免误加white-space: nowrap。
flex-wrap: nowrap 是默认值，但可能被覆盖
Flex 容器默认就是 flex-wrap: nowrap，所以“不换行”本不需要额外设置。如果你发现子元素仍在换行，大概率是某处 CSS 显式写了 flex-wrap: wrap，或者被框架（如 Ant Design 的 .ant-row）、重置样式、通配符规则覆盖了。打开开发者工具，直接看父容器的「Computed」面板里 flex-wrap 的实际值——不是看源码写了什么，而是看它最终生效的是不是 nowrap。
子项溢出却不滚动？缺三样东西
只设 flex-wrap: nowrap 不会自动出现滚动条，它只是禁止换行，不控制溢出行为。要让内容横向滚动，必须同时满足：
- 父容器有明确宽度限制（
width或max-width，不能靠父级撑开） - 父容器设
overflow-x: auto（或scroll） - 子项总宽度（含 padding/border/margin）真正超过容器可用宽度
常见失败原因是子项被默认的 flex-shrink: 1 压缩了，导致总宽没超限。此时需给子项加 flex-shrink: 0 或写成 flex: 0 0 auto，让它保持原始尺寸。
文本内容撑开整行？min-width: 0 和 white-space 冲突
即使容器设了 flex-wrap: nowrap，子元素里的长文本（如 token、URL）仍可能把整行顶宽，看起来像“被迫换行”，其实是单行内溢出。根本原因有两个：
- 子元素默认
min-width: auto，阻止内容收缩，得显式加min-width: 0（加在文字所在的具体子元素上，不是父容器） - 子元素或其祖先设了
white-space: nowrap，会锁死内部换行——哪怕你只想让容器不换行，也别误传这个属性到文本节点
若还需隐藏溢出，补上 overflow: hidden；想截断加省略号，则必须配合 white-space: nowrap + overflow: hidden + text-overflow: ellipsis + 固定宽度（注意：这些对 flex 子项本身无效，得套一层块级元素）。
移动端滚动卡顿？补 -webkit-overflow-scrolling
在 iOS Safari 上，overflow-x: auto 容器滚动常卡顿或惯性失效。必须加 -webkit-overflow-scrolling: touch 才能启用原生滚动引擎。现代项目可只写这一句，无需前缀判断；但要注意它只对 overflow 为 auto 或 scroll 的元素生效，且不能和 transform 同时用在同一个元素上，否则可能触发渲染 bug。
最易忽略的点是：flex-wrap: nowrap 只管子项排列，不管子项内部是否溢出；而子项是否收缩、是否截断、是否滚动，全由它自己的盒模型和文本属性决定——不是加个 display: flex 就万事大吉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
