最常见原因是容器缺少明确宽度限制或子元素被flex自动换行/压缩；必须用外层div设overflow-x-auto和width，table加table-layout:fixed与white-space:nowrap，移动端还需-webkit-overflow-scrolling:touch。
为什么加了 overflow-x-auto 还没横向滚动条？
最常见原因是容器没有明确的**宽度限制**，或者子元素被 flex 自动换行/压缩。overflow-x-auto 只在“内容实际宽于容器”时才触发滚动——如果父容器 width 是 auto 或 fit-content，浏览器会先撑宽它，根本不会溢出。
典型错误场景：
- 直接给
<table> 加 <code>overflow-x-auto（无效，必须套外层<div>） <li>父容器用了 <code>flex但没设flex-shrink: 0，子项被压缩后宽度失真 - 子元素是
inline或未设white-space: nowrap，文本提前换行，撑不出横向溢出 - 外层容器必须有
display: flex和明确的width（如w-full或max-w-4xl） - 必须加
flex-nowrap，禁止子项换行 - 子项建议用
flex-shrink-0，防止被 flex 压缩变形 - 滚动行为靠
overflow-x-auto触发，不是overflow-scroll（后者强制显示滚动条，不推荐）
flex + overflow-x-auto 的最小可行组合
这是最可控、兼容性最好的横向滚动写法，适用于卡片列表、时间轴、标签栏等场景。
关键点：
示例结构：
<div class="flex overflow-x-auto w-full pb-2"> <div class="flex-shrink-0 w-64 p-4 bg-blue-100">卡片1</div> <div class="flex-shrink-0 w-64 p-4 bg-blue-100">卡片2</div> <div class="flex-shrink-0 w-64 p-4 bg-blue-100">卡片3</div> </div>
移动端 Safari 横向滚动卡顿或拖不动怎么办？
iOS Safari 对 overflow-x 的触控支持较弱，尤其嵌套在 flex 或 transform 容器中时容易失效。
必须加的修复项：
-
scroll-behavior: smooth不起作用，别白加 - 在滚动容器上显式加
-webkit-overflow-scrolling: touch（Tailwind 中用scroll-smooth不等价，需自定义或插件） - 确保滚动容器是
display: block或flex，不能是inline-flex或被transform/will-change干扰 - 检查父级是否用了
overscroll-behavior: contain，它会拦截横向滚动事件传递
表格（<table>）怎么横向滚动？
<p>表格本身不能直接滚动，必须用 div 包一层，并控制其宽度和内部行为。</p>
<p>必要条件：</p>
<ul><li>外层 <code><div>：设 <code>overflow-x-auto + 明确宽度（如 w-full），且避免被 flex 压缩（加 flex-shrink-0 或设 block）
<table>：加 <code>table-layout: fixed（Tailwind 无对应类，需自定义或内联） + white-space: nowrap（用 whitespace-nowrap）
table 仍会无限撑宽（例如用 w-32 或 min-w-0 配合 truncate）注意：min-w-fit 或 w-max 会让表格拒绝收缩，反而破坏滚动前提——此时应改用 w-full 或固定列宽。
