加了 overflow-x: auto 不滚动，根本原因是 flex 默认 flex-shrink: 1 压缩子项，导致无法触发溢出；必须同时满足：父容器有明确宽度（如 width: 100%）、子项设 flex-shrink: 0、且 display: flex + overflow-x: auto 共存。
为什么加了 overflow-x: auto 还是不滚动？
根本不是“没生效”，而是 Flex 默认会压缩子项来填满容器——flex-shrink: 1 在默默工作。哪怕你给每个 .tag 写了 width: 80px，只要父容器宽度不够，它们就会被压窄，永远达不到“溢出”条件。
必须同时满足三个硬性条件：
-
display: flex+overflow-x: auto（不能只写overflow: auto） - 父容器有明确宽度限制（如
width: 100%或max-width: 320px） - 每个子标签设
flex-shrink: 0（flex: 0 0 auto也行，但语义不如前者清晰）
flex-shrink: 0 和 flex: 0 0 auto 到底该用哪个？
推荐直接写 flex-shrink: 0。它只关掉收缩行为，不碰 flex-grow 和 flex-basis，避免意外尺寸问题。比如你用 flex: 0 0 auto，某些旧版 Safari 可能把 flex-basis 解析为 0%，导致标签塌缩；而 flex-shrink: 0 意图明确，兼容性更稳。
别用 flex: none：虽然等价，但 iOS 12 及更早版本对它的支持不一致。
绝对不要只写 flex: 0：这会让 flex-basis 变成 0%，标签直接消失。
移动端滚动条看不见、拖不动怎么办？
iOS Safari 默认隐藏横向滚动条，且触控惯性滚动常失效——这不是 bug，是 WebKit 的策略。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
补两行关键样式：
-
scroll-behavior: smooth（提升滑动体验） -
-webkit-overflow-scrolling: touch（仅需加在容器上，iOS 15+ 已逐步弃用，但对老版本仍必要）
另外，确保容器有足够高度（比如 min-height: 44px），否则手指没地方按。
标签文字换行破坏单行布局？
white-space: nowrap 要加在子标签上，不是父容器。Flex 容器本身不响应这个属性。
如果标签内含长单词或 URL，还得加：
-
min-width: 0（防文本撑开容器） -
overflow: hidden+text-overflow: ellipsis（可选，截断过长文本）
注意：min-width: 0 和 flex-shrink: 0 不冲突，但别加在已设 flex-shrink: 0 的元素上——它可能干扰尺寸计算，尤其在含图片的标签里。
flex-shrink: 0 的配对使用，缺一不可。很多人调半天发现滚动条就是不出现，回头一看父容器 width 是 auto，或者子项漏写了 shrink 控制。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
