直接用display:flex+overflow-x:auto无法实现水平滚动，因容器缺宽度约束、子项默认flex-shrink:1被压缩、ios需-webkit-overflow-scrolling:touch激活惯性滚动。
直接用 display: flex + overflow-x: auto 就能实现水平滚动，但多数人卡在滚动不出现、移动端滑不动、标签被压缩这三处——核心不是“能不能”，而是容器宽度控制、子项弹性行为和滚动激活机制是否到位。
为什么 overflow-x: auto 不生效？容器没设宽度限制
只写 display: flex 和 overflow-x: auto 是无效的。Flex 容器默认会无限延展以容纳所有子项，浏览器根本不会触发滚动。
- 必须给容器加明确的宽度约束：
max-width: 100%（最常用，适配弹性父容器） - 或
width: min(100%, 480px)（兼顾小屏与桌面最大宽度） - 避免只靠
width: fit-content，Safari 旧版本对它的支持不稳定 - 如果父元素是
display: inline-flex或未设宽的div，子容器仍可能撑开整个视口
为什么 iOS Safari 把标签压窄了？子项 flex-shrink 默认为 1
iOS Safari 对 Flex 子项的收缩行为特别激进，哪怕多一个字符，它也会把所有 .tab 压窄，导致文字截断、图标错位。
- 子项必须统一设为：
flex: 0 0 auto（禁伸长、禁压缩、按内容定宽） - 若子项含
<img>，额外加min-width: 0，否则图片固有最小宽会干扰布局 - 别只写
flex-shrink: 0，因为flex-basis可能继承为auto或content，各浏览器解析不一致
为什么移动端手指一抬就停？-webkit-overflow-scrolling: touch 缺失
Chrome 和 Firefox 已忽略该属性，但它仍是 iOS Safari 的刚需。没有它，overflow-x: auto 在触摸设备上只是“视觉可滚”，实际无惯性、无回弹、极易卡顿。
- 全局加上：
-webkit-overflow-scrolling: touch，别只放在媒体查询里 - 检查父级是否有
overscroll-behavior: none或contain: layout，这些会拦截滚动事件 - 确保容器没有设置
white-space: nowrap（对 flex 子项无效，还可能干扰换行逻辑）
为什么 JS 动态增删 tab 后滚动失效？inline-flex 容器不自动重排
display: inline-flex 容器在 DOM 变更后不会强制重新计算自身宽度，尤其当新增 tab 导致内容变宽时，容器仍维持旧尺寸，overflow-x 失效。
- 手动触发重排：增删后对容器执行
el.style.width = 'auto'; setTimeout(() => el.style.width = '', 0) - 更稳妥的做法是改用
display: flex+ 显式width控制，或监听ResizeObserver监控内容宽度变化 - 若必须用
inline-flex，每次操作后调用el.scrollWidth（读取属性会强制重排）
真正容易被忽略的是：滚动区域一旦嵌套在 position: sticky 或 transform 上级中，滚动行为可能被截断；另外，scroll-behavior: smooth 在部分安卓 WebView 中会直接禁用 touch 滚动，上线前务必真机验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
