inline-flex 比 block + flex 更适合标签栏，因其容器自动收缩包裹内容宽度，不默认占满父容器；需配合 max-width: 100%、flex: 0 0 auto 子项、-webkit-overflow-scrolling: touch 及动态重排才能实现可靠滚动。
inline-flex 容器为什么比 block + flex 更适合标签栏
用 display: inline-flex 替代 display: flex 的核心好处是：容器本身会“收缩包裹”内容宽度，不会默认占满父容器 100% —— 这对响应式标签栏很关键。比如在卡片内部、侧边栏或动态宽度区域里，你不想让标签栏强行撑开整个容器，而希望它只宽到“刚好够放当前可见标签”，再靠 overflow-x: auto 暴露滚动能力。
必须显式设 width / max-width 才能触发滚动
即使用了 inline-flex，如果父容器没约束宽度，浏览器仍会让它无限延展，滚动条永远不会出现。常见错误就是只写：
.tabs {
display: inline-flex;
overflow-x: auto;
flex-wrap: nowrap;
}
结果标签全挤在一行，页面变宽，没滚动条。正确做法是给容器加明确宽度限制：
-
max-width: 100%（推荐）：在弹性父容器中自适应，不溢出 -
width: min(100%, 480px)：兼顾移动端和桌面端最大宽度 -
width: fit-content+max-width: 100%：更精准，但 Safari 旧版支持弱
子项必须禁用 flex-shrink，否则 iOS Safari 会压缩标签
iOS Safari 对 inline-flex 子项的 flex-shrink 行为特别敏感——哪怕只多一个字符，它也可能把所有标签压窄，导致文字截断、图标错位。解决方法不是调 white-space: nowrap（对 flex 子项无效），而是统一控制子项尺寸行为：
立即学习“前端免费学习笔记（深入）”；
- 用
flex: 0 0 auto：最稳妥，禁伸长、禁压缩、按内容定宽 - 若含图片或
<img>标签，额外加min-width: 0，防止其固有最小宽干扰布局 - 避免只写
flex-shrink: 0，因为flex-basis可能被继承为auto或content，不同浏览器解析不一致
移动端滑动失效？补上 -webkit-overflow-scrolling
在 iOS Safari 和部分 Android WebView 中，仅靠 overflow-x: auto 无法激活惯性滚动，手指一抬就停。必须加：
.tabs {
-webkit-overflow-scrolling: touch;
}
注意：-webkit-overflow-scrolling: touch 已被现代 Chrome/Firefox 忽略，但它仍是 iOS Safari 的刚需。别把它写在媒体查询里“只为 iOS”，直接全局加上更省心。另外，确保没有父级元素设置了 overscroll-behavior: none 或 contain: layout，这些会拦截滚动事件。
真正容易被忽略的是：当标签内容动态增删（比如 JS 插入新 tab）时，inline-flex 容器的宽度不会自动重算，可能卡在旧尺寸。此时需手动触发重排，例如 el.style.transform = 'scale(1)' 或临时 toggle class。
