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插件）
```html <div class="h-64 overflow-y-auto border"><div>第1行</div><div>第2行</div><!-- …很多行… --></div> ```
overflow-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 的组合中。
立即学习“前端免费学习笔记（深入）”；
- 检查是否有
transform（如scale、translateZ）触发了新的层叠上下文，导致子元素脱离滚动容器的事件捕获流 - 确认没有意外设置了
pointer-events-none在父容器或遮罩层上 - 滚动容器若含
backdrop-blur，部分 Chrome 版本会丢失事件穿透，临时解法是加will-change: scroll-position - 在 React/Vue 中动态渲染滚动内容时，确保 DOM 已挂载再初始化滚动监听（比如用
useEffect或onMounted）
Tailwind 的 overflow 类本身很简单，难的是它和高度计算、层叠上下文、移动端滚动机制的隐式耦合。最容易被忽略的，是那个看似无关的 height 或 max-height —— 没它，overflow 就只是个摆设。
