overflow-x: auto 在 ios 上常失效，因 safari 仅在容器有明确 width/max-width、子项设 flex: 0 0 auto 且加 -webkit-overflow-scrolling: touch 时才启用横向滚动，否则被判定无溢出或卡顿。
直接给容器加 overflow-x: auto 不够，必须同时约束宽度、禁用子项压缩、处理移动端滚动惯性——否则在 iOS 上大概率滑不动，或在小屏上标签被压扁。
为什么 overflow-x: auto 在 iOS 上经常失效
iOS Safari 对横向滚动的触发非常保守：只有当内容真实溢出且容器有明确宽度时才启用滚动。单纯写 overflow-x: auto 很可能被忽略。
- 必须给容器设
width或max-width（比如max-width: 100%），不能依赖fit-content或未约束的 flex 父级 - 父容器若为 flex 项，要加
flex-shrink: 0，否则可能被压缩导致“看似没溢出” - 务必加上
-webkit-overflow-scrolling: touch，这是 iOS 的刚需，现代 Chrome/Firefox 会忽略它，但不加 iOS 就卡顿 - 检查是否有祖先元素设置了
overscroll-behavior: none或contain: layout，它们会静默拦截滚动事件
子项宽度控制：flex: 0 0 auto 还是 min-width？
两者都得用，但作用不同：前者防压缩，后者保最小展示空间。只靠 min-width 在 iOS Safari 下仍可能被 flex 引擎强行缩窄。
- 子项统一设
flex: 0 0 auto—— 禁伸长、禁压缩、按内容定宽，比单独写flex-shrink: 0更可靠 - 再配
min-width: 120px（或响应式值如min-width: min(120px, 25%)），避免小屏下文字挤成一团 - 含图片或图标时，额外加
min-width: 0，防止 img 元素固有最小宽干扰布局 - 避免用
white-space: nowrap控制子项，它对 flex 子项无效，且易引发换行错乱
响应式遮罩提示：渐变不是装饰，是视觉线索
两端加渐变遮罩不是为了好看，而是暗示“内容可滚动”。但遮罩本身不解决“用户不知道能滑”的问题，只是补救手段。
- 容器必须设
position: relative，否则::before/::after伪元素会相对 body 定位，跑偏 - 左遮罩用
background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0))，右遮罩用to left，别用90deg—— Safari 高 DPR 屏上容易断层 - 遮罩宽度要用
min(40px, 10%)或媒体查询分段，固定40px在手机上太宽，在大屏上又露硬边 -
pointer-events: none必须加，否则遮罩会拦截滚动手势，尤其在触屏上直接失灵
真正难的是动态场景：JS 插入新标签后，滚动位置丢失、宽度重算延迟、iOS 滚动惯性重置——这些没法单靠 CSS 解决，得配合 scrollLeft 手动同步或用 ResizeObserver 监听容器变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
