Tailwind 中存在 overflow-scroll 类但其作用是强制显示滚动条而非控制是否滚动正确做法是用 overflow-y-auto 配合固定高度如 h-64实现内容溢出时自动滚动。overflow-scroll 在 Tailwind 中根本不存在Tailwind CSS 没有 overflow-scroll 这个类名这是初学者最常搜错的关键词。它只提供原子类 overflow-auto、overflow-hidden、overflow-visible 和 overflow-scroll —— 等等最后这个其实是有的但名字是 overflow-scroll不是你直觉里“带横杠”的写法。问题在于它不控制“是否滚动”而是强制启用滚动条即使内容没溢出且在 Safari 上可能不显示空滚动条。overflow-auto 是更安全的选择仅当内容溢出时才显示滚动条overflow-scroll 会始终渲染滚动条轨道macOS 默认隐藏轨道需配合 scrollbar-visible 或自定义样式移动端 iOS Safari 对 overflow-scroll 的触摸滚动支持弱容易卡顿或失效若想让某元素可滚动必须确保它有明确的高度限制比如 h-64 或 max-h-96否则 overflow 类无效怎么让 div 内部内容垂直滚动典型场景侧边菜单、日志列表、代码预览框。核心是「容器定高 溢出设为 auto」。给容器加 h-64或 max-h-96、overflow-y-auto避免用 min-h- 类替代固定高度它无法触发滚动逻辑如果子元素是 Flex 容器注意 flex-col flex-1 可能撑满父容器导致无溢出此时需加 overflow-y-auto 到子容器而非父级滚动条默认不可见macOS / iOS如需始终可见可加 scrollbar-thumb-gray-400 scrollbar-track-gray-100 等自定义类需开启 Tailwind 的 scrollbar 插件htmldiv classh-64 overflow-y-auto borderdiv第1行/divdiv第2行/div!-- …很多行… --/divoverflow-x-scroll 导致水平滚动条错位或截断常见于表格、代码块、响应式卡片组。问题不是类名写错而是布局未适配父容器没设 whitespace-nowrap或子项用了 flex-wrap或文本自动换行破坏了宽度连续性。对需要水平滚动的内联内容加 whitespace-nowrap 防止换行如果是 flex 布局确保父容器用 flex-nowrap子项不用 flex-shrink-0否则可能被压缩表格场景慎用 overflow-x-scroll直接套在 table 上无效应套在包裹 table 的 div 上某些 UI 库如 Headless UI组件内部有 min-width: 0会干扰 overflow-x-scroll 行为需手动覆盖滚动区域里的点击/悬停事件失效不是 JS 绑定问题大概率是 overflow 容器裁剪了 pointer-events 区域尤其出现在嵌套滚动 transform 或 backdrop-filter 的组合中。 VWO 一个A/B测试工具