Flex子项默认min-width: auto锁死收缩下限，导致内容撑破容器并触发横向滚动条；必须显式设min-width: 0才能激活flex-shrink，配合overflow-x: hidden等约束才有效。
为什么直接用 display: flex 会撑破容器并出现滚动条
默认情况下，Flex 容器的 flex-wrap 是 nowrap，子项不会换行；但关键在于：即使设了 overflow-x: hidden，如果子项总宽度超过容器，浏览器仍会按需分配主轴空间，导致容器被撑宽（尤其在 Safari 移动端），overflow 失效。这不是 bug，而是 Flex 的默认伸缩行为在未约束子项尺寸时的必然结果。
实操建议：
- 必须显式给所有子项设置
flex: 0 0 auto或flex: 0 0 fit-content（后者兼容性差，慎用） - 容器需加
overflow-x: hidden和overscroll-behavior-x: contain（防 iOS 滚动穿透） - 避免对子项设
width: 100%或其他可能触发弹性拉伸的尺寸声明 - 移动端务必加
-webkit-overflow-scrolling: touch提升滚动流畅度（仅限需要手动滑动场景）
如何让列表真正「横向滑动」而不是「被截断」
光靠 flex 布局本身不提供滑动能力——它只是排列，滑动依赖原生滚动行为。所谓“无滚动条横滑”，本质是启用容器内原生横向滚动，并隐藏滚动条视觉样式。
实操建议：
- 容器设
display: flex+overflow-x: auto（不是hidden！否则不能滑） - 用
::-webkit-scrollbar { display: none; }隐藏 Chrome/Safari 滚动条（Firefox 不支持该伪元素，但其默认不显示滚动条） - 为防止 iOS 点击延迟，子项加
-webkit-tap-highlight-color: transparent - 若需禁止页面整体跟随滑动，容器加
touch-action: pan-y
flex-shrink: 0 和 flex-basis 怎么配才不塌陷
移动端屏幕窄，子项内容长度不一，若只写 flex: 0 0 auto，某些文字多的项可能因换行或 min-width 表现异常，导致横向布局错乱。
实操建议：
- 优先用
flex: 0 0 max-content（兼容性 OK，Chrome 63+/Safari 12.1+）代替auto，更可控 - 若需固定宽度（如图标卡片），直接写
flex: 0 0 80px，比用width更可靠 - 避免同时设
min-width和flex-basis冲突；若必须限制最小尺寸，用min-width: 0配合overflow: hidden截断文本 - 对含图片的子项，记得设
img { max-width: 100%; height: auto; }，否则破坏 flex 基线对齐
为什么 iOS Safari 下手指松开后惯性滚动突然卡住
这是 Safari 对 overflow: auto 容器的优化限制：当容器没有明确高度、且父级未形成 BFC 时，滚动引擎可能降级处理，导致惯性中断或响应迟钝。
实操建议：
- 给容器加
min-height: 1px（哪怕内容为空，也能激活滚动上下文） - 父容器避免使用
display: inline-flex或浮动布局，改用display: flex或block - 禁用
will-change: transform（除非真做动画），它在某些 iOS 版本中反而干扰滚动 - 测试时用真机 Safari 开启「Web Inspector」，检查是否报
[Warning] Overscroll is disabled类提示
实际最易忽略的是：横滑列表的容器必须有明确的 width 或 max-width（比如 width: 100%），否则在部分安卓 WebView 中会按子项总和计算宽度，导致布局完全失控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
