加 overflow-x: auto 仍不横向滚动，因内容未自然撑宽容器，需禁换行、设固定宽、用 Flex 布局、移动端加 -webkit-overflow-scrolling: touch 并真机验证。

直接给目标容器加 overflow-x: auto 不够，必须同时切断子元素换行、约束内容总宽度、处理移动端滚动惯性，否则滚动条不出现、拖不动或卡在中间。

为什么加了 overflow-x: auto 还不横向滚动

浏览器不会凭空触发横向滚动——它只在「内部内容自然总宽度 > 容器 clientWidth」时才显示滚动条。常见失效原因：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• white-space: normal（默认）导致子元素换行，内容没撑开
• 子元素用了 display: block 或 float，垂直堆叠而非水平排列
• 容器没设明确宽度（如只写 overflow-x: auto，没配 width: 100% 或 max-width）
• table 元素直接加 overflow-x: auto 无效，它会无视自身 overflow

用 Flex 布局实现可靠横向滚动

比 white-space: nowrap + inline-block 更可控，语义清晰，兼容性好（Chrome 29+/Firefox 28+/Safari 9+）。

• 父容器加：display: flex、flex-wrap: nowrap、overflow-x: auto、overflow-y: hidden
• 子项加：flex: 0 0 auto（禁缩放、禁拉伸、按内容宽）
• 移动端必须加：-webkit-overflow-scrolling: touch（iOS Safari 仍依赖）
• 若要吸附对齐（如商品卡片停在左边缘），容器加 scroll-snap-type: x mandatory，子项加 scroll-snap-align: start

表格局部横向滚动必须用外层 div 包裹

<table> 是独立格式化上下文，自身不响应 <code>overflow-x。必须靠外层容器接管滚动逻辑。

立即学习“前端免费学习笔记（深入）”；

• 外层 <div class="table-wrapper"> 加：<code>overflow-x: auto、width: 100%、display: block、-webkit-overflow-scrolling: touch
• <table> 自身加：<code>display: block、min-width: max-content，并删掉 width: 100%
• <th> 和 <code><td> 需统一设 <code>min-width（如 min-width: 120px），避免列宽错位
• 长文本单元格加：max-width: 200px、overflow: hidden、text-overflow: ellipsis

隐藏滚动条但保留滚动能力

隐藏不是为了“看起来干净”，而是避免滚动条挤占空间或干扰设计；但别误删 overflow-x: auto，否则真不能滚。

• WebKit（Chrome/Safari）：::-webkit-scrollbar { width: 0; height: 0; }
• Firefox：scrollbar-width: none（写在容器上）
• IE/Edge Legacy：不支持隐藏，只能接受原生样式
• 隐藏后仍支持鼠标滚轮、触摸拖拽、element.scrollLeft 编程控制

最易被忽略的是：移动端 iOS Safari 对横向滚动的限制比想象中深——哪怕所有 CSS 都写对了，缺了 -webkit-overflow-scrolling: touch 或 touch-action: pan-x，手指一划就卡住或回弹。真机测试前，务必确认这两项已生效。