直接给加overflow-x:auto无效，因其是独立格式化上下文且无视自身overflow设置；必须用设width、overflow-x:auto、white-space:nowrap及-webkit-overflow-scrolling:touch的包裹，并将设为display:block和min-width:max-content。
直接用 overflow-x: auto 通常不行——浏览器默认会把内容撑宽，导致横向滚动失效，必须配合宽度约束和白空间处理。
为什么 overflow-x: auto 不生效？
常见现象是容器没出现滚动条，或者内容被换行、溢出后消失。根本原因是：white-space 默认为 normal，文字会折行；同时若子元素（如 inline 元素或未设 flex-shrink: 0 的 flex 项）能被压缩，容器就“没东西可滚”。
- 父容器必须有明确的
width或max-width（不能依赖内容自适应） - 子元素需阻止换行：设
white-space: nowrap（对文本）或flex-shrink: 0（对 flex 子项） - 避免子元素使用
display: inline且未包裹在white-space: nowrap容器中
Flex 布局下横向滚动最稳的写法
比纯 inline-block 更可控，尤其适合动态列表。关键点在于让 flex 容器不换行、子项不收缩，并限制容器宽度。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
.scroll-container {
display: flex;
overflow-x: auto;
width: 300px; /* 必须设固定宽或 max-width */
white-space: nowrap; /* 防止内部文本意外折行 */
}
<p>.scroll-container > <em> {
flex: 0 0 auto; /</em> 等价于 flex-shrink: 0 + flex-grow: 0 + flex-basis: auto <em>/
margin-right: 8px; /</em> 可选间距 */
}</p>
-
flex: 0 0 auto比flex-shrink: 0更安全——它同时禁用伸缩和重设基准尺寸 - 如果子项是
img或button，它们默认flex-shrink: 1，不加控制就会被压扁 - 滚动条默认显示在容器底部，若要隐藏可用
scrollbar-width: none（Firefox）和::-webkit-scrollbar { display: none }（Chrome/Safari）
移动端 touch 滚动卡顿怎么办？
iOS Safari 和旧版 Android 浏览器对 overflow-x 的 touch 支持弱，容易卡顿或无法拖动。核心解法是启用硬件加速 + 显式声明滚动行为。
- 加
-webkit-overflow-scrolling: touch（仅 iOS Safari 有效，已逐步废弃但仍有兼容价值） - 强制开启 GPU 加速：
transform: translateZ(0)或will-change: scroll-position - 避免在滚动容器内频繁触发 layout（比如 JS 动态改子元素宽高），否则会掉帧
- 若用 React/Vue 渲染大量项，记得加
key且避免用 index 当 key，否则重排时可能复用错误 DOM 节点
横向滚动真正难的不是加 overflow-x，而是让内容“拒绝妥协”——不折行、不收缩、不重排。很多问题其实出在子元素的默认行为上，而不是容器本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
