要让div出现水平滚动条，必须确保内容真正超宽：设容器宽度+overflow-x:auto，子元素单行排列（white-space:nowrap或flex-nowrap），禁用flex-shrink和自适应宽度；overflow-x:scroll会强制显示空滚动条，应优先用auto；flex容器需设flex-wrap:nowrap、子项flex:0 0 auto；移动端需加touch-action:pan-y以支持手指拖拽。
怎么让 div 出现水平滚动条
直接加 overflow-x: auto 不一定有效，关键得让内容真正「超宽」——浏览器只在内部元素总宽度 > 容器宽度时才显示滚动条。
常见错误是：容器设了 width: 300px，但子元素用 display: inline-block 或 flex 且没限制换行，结果内容被自动折行，根本没溢出，滚动条自然不出现。
- 确保子元素是单行排列：
white-space: nowrap（对文字）或flex-nowrap（对 flex 容器） - 给容器设明确宽度（比如
width: 300px），并加overflow-x: auto - 子元素别用
width: 100%或flex: 1这类自适应行为，否则会压缩，不触发溢出
为什么 overflow-x: scroll 一直显示空滚动条
overflow-x: scroll 强制显示滚动条，哪怕没内容溢出。多数情况这不是你想要的——它占空间、破坏布局，还让用户误以为有可滚动内容。
真实需求通常是「有内容溢出才显示，否则隐藏」，所以优先用 overflow-x: auto。只有在需要滚动条常驻（比如避免内容切换时布局抖动）时，才考虑 scroll，并配合 padding-bottom 补偿滚动条高度占用。
立即学习“前端免费学习笔记（深入）”；
- Mac safari/chrome 默认隐藏滚动条轨道，只在滚动时浮现；若需始终可见，得用
::-webkit-scrollbar自定义（仅 WebKit） - firefox 不支持
::-webkit-scrollbar，要用scrollbar-width（auto/thin/none） -
overflow-x: scroll在移动端可能触发意外横向滚动，尤其配合touch-action: pan-y时要小心
flex 容器里水平滚动失效怎么办
Flex 容器默认会收缩子项（flex-shrink: 1），导致内容被压缩，无法溢出。这是最隐蔽也最常见的原因。
解决思路很直接：阻止收缩 + 禁止换行 + 显式溢出控制。
- 给子容器加
flex: 0 0 auto（等价于flex-shrink: 0） - 给父 flex 容器加
flex-wrap: nowrap - 父容器必须设
overflow-x: auto，且宽度不能是fit-content或max-content - 如果子项是图片，记得加
flex-shrink: 0或min-width: 0防止被压缩变形
移动端 touch 滚动卡顿或不响应
纯 CSS 水平滚动在 ios Safari 上常卡顿，甚至完全不响应手指拖拽，根本原因是浏览器默认把横向滑动识别为「页面级导航」（比如左右切 tab），而非容器内滚动。
核心解法是告诉浏览器：这个区域允许用户用 touch 横向滚动，别抢事件。
- 给滚动容器加
touch-action: pan-y pinch-zoom（禁止横向 pan，保留纵向和缩放） - 更稳妥写法：
touch-action: pan-y pan-x pinch-zoom，再配合 js 阻止默认行为（如需精确控制） - 避免在滚动容器上监听
touchstart并调用preventDefault()，否则可能彻底禁掉滚动 - 真机测试必做：模拟器里的 touch 行为和真机差异很大，特别是老款 ipad
滚动区域的边界判定、嵌套滚动冲突、字体渲染导致的宽度计算误差……这些细节堆在一起，才是实际项目里最耗时间的地方。