先确认内容是否真溢出：若scrollHeight≤clientHeight，则滚动条为空占位，需检查容器尺寸、flex拉伸、white-space换行或iOS的-webkit-overflow-scrolling缺失等问题。
overflow: scroll 有滚动条但拖不动，先看内容有没有真溢出
滚动条出现 ≠ 内容真的超出了容器。很多情况下，overflow: scroll 渲染出了滚动条（尤其在 Chrome），但子元素总高度根本没超过父容器的 height，自然无法滚动——这不是 bug，是预期行为。
验证方法很简单：打开浏览器开发者工具，选中该容器，在「Computed」面板里比对两个值：
-
height（或max-height）是否被正确计算且数值合理 -
scrollHeight是否明显大于clientHeight（右键元素 → «Scroll into view» 后看控制台输入getBoundingClientRect()或直接查这两个属性）
如果 scrollHeight ≤ clientHeight，说明内容没溢出，滚动条只是“空占位”。此时要检查的是布局本身，而不是滚动设置。
Flex 容器里 overflow: scroll 失效，大概率是 flex: 1 撑开了父容器
Flex 子项设了 flex: 1，又没限制自身尺寸，它会无限拉伸去填满剩余空间，导致父容器实际高度被撑高，overflow 根本没触发条件。
立即学习“前端免费学习笔记（深入）”；
典型表现：父容器明明写了 height: 400px; overflow: scroll，但整个区域还是随内容越变越高。
解决方式不是加 min-height 或 max-height，而是打断 flex 的拉伸逻辑：
- 给那个
flex: 1的子元素显式加height: 0（纵向布局）或width: 0（横向布局） - 再配合
overflow-y: auto或overflow-x: auto到它自己身上（不是父容器） - 确保它的子内容是块级、非绝对定位、不脱离文档流
例如：.main { flex: 1; height: 0; overflow-y: auto; } —— 这样它才真正「受限于父容器高度」并可滚动。
overflow-x: scroll 横向滚动失败，重点查 white-space 和 flex-wrap
横向滚动条能看见却拖不动，90% 是因为内容被强制换行或 flex 折行，导致实际渲染宽度没超限。
常见诱因：
- 文本类子元素没加
white-space: nowrap，自动折行后高度增加、宽度没溢出 - flex 父容器用了
flex-wrap: wrap，子项主动换行，不再横向延伸 - 表格套在
overflow-x: scroll容器里，但<table>自身没设table-layout: fixed+width: 100%，宽度由内容决定，可能未溢出
修复动作很具体：
- 对需要横向滚动的内联内容，包裹层加
white-space: nowrap - flex 布局下，父容器必须是
flex-nowrap，关键子项加min-width: 0防止拒绝收缩 - 表格场景，别把
overflow-x: scroll直接写在<table>上，而要套一层<div class="overflow-x-auto"><table>...</table></div>
移动端 iOS Safari 上 overflow 滚动卡顿或点不动
iOS Safari 对 overflow: scroll 的触摸滚动支持较弱，尤其嵌套滚动或容器内含 position: absolute 元素时，容易失灵或延迟响应。
这不是代码写错，而是渲染机制差异：
- macOS/iOS 默认隐藏滚动轨道，
overflow: scroll强制显示轨道但不保证可操作性；overflow-y: auto更可靠 - 滚动区域内的点击/悬停事件失效，往往是因为
overflow容器裁剪了pointer-events区域，尤其嵌套两层以上滚动时 - 避免在滚动容器内使用
transform、filter或will-change，它们会创建新层叠上下文，干扰滚动捕获
临时缓解方案：给滚动容器加 -webkit-overflow-scrolling: touch（仅 Safari 有效），但注意它已属废弃属性，长期应转向更可控的布局约束，比如用 max-h-96 + overflow-y-auto 组合，而非依赖强制滚动条。
