根本原因是子项默认flex-shrink: 1导致压缩换行，需统一设子项flex-shrink: 0、容器white-space: nowrap及明确宽度；flex-shrink是子项属性，父容器设置无效；移动端需加-webkit-overflow-scrolling: touch并避免transform等干扰合成层。
flex容器加了overflow-x: auto但还是换行
根本原因是子项默认会收缩（flex-shrink: 1），当容器宽度不够时，子项被压缩甚至折行，滚动根本触发不了。
必须显式阻止收缩：
- 给所有菜单项加 flex-shrink: 0
- 容器本身设 white-space: nowrap 防文本换行（尤其含文字的按钮）
- 确保容器有明确宽度（比如 width: 100% 或固定值），否则 overflow-x 无效
为什么flex-shrink: 0不能只写在父容器上
flex-shrink 是子项的属性，父容器的 display: flex 只启动弹性布局，不接管子项缩放逻辑。
常见错误写法：
- 在父容器上写 flex-shrink: 0 → 无效，该属性对非 flex 项目无意义
- 只给部分子项设 flex-shrink: 0 → 其余项仍可能压缩，导致整体布局错乱
正确做法是统一控制子项：
- 用类名批量设置：.menu-item { flex-shrink: 0; }
- 或用属性选择器：:is(.menu > *) { flex-shrink: 0; }
移动端 touch 滚动不灵敏或卡顿
CSS 层面需补两个关键声明，否则 iOS Safari 和部分安卓浏览器会禁用惯性滚动：
-
-webkit-overflow-scrolling: touch（仅 Safari 旧版必需，iOS 15+ 可省略） -
scroll-behavior: smooth非必需，但加了能避免跳变感 - 更关键的是：确保容器没有
transform、filter等触发合成层的属性，否则可能干扰滚动线程
示例安全写法：.menu { overflow-x: auto; -webkit-overflow-scrolling: touch; }.menu-item { flex: none; flex-shrink: 0; }
菜单项宽度不固定时如何避免溢出错位
如果菜单项含动态文字或图标，单纯设 flex-shrink: 0 可能导致整体超宽、滚动条位置异常。
这时要配合尺寸约束：
- 给子项设 min-width: fit-content 或具体值（如 min-width: 80px）
- 用 max-width 防止单项过宽撑爆布局
- 避免在子项里用 width: 100%，它会绑定到父容器宽度，失去独立性
真正可控的组合是：.menu-item { flex: none; flex-shrink: 0; min-width: max-content; }
注意：max-content 在老浏览器支持差，上线前需检查兼容性
滚动菜单的麻烦不在“怎么让它滚”，而在“怎么让它稳稳地滚不抽风”——子项收缩、移动端合成层、宽度计算优先级，三者稍一打架，就出现半截卡住、滑不动、点不中。这些细节没对齐，光调 overflow-x 没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
