overflow: auto 是大多数场景下最稳妥的选择，overflow: hidden 适合硬裁剪，overflow: scroll 要慎用——它会在没溢出时也强行显示滚动条，破坏视觉节奏。
直接说结论：overflow: auto 是大多数场景下最稳妥的选择，overflow: hidden 适合硬裁剪，overflow: scroll 要慎用——它会在没溢出时也强行显示滚动条，破坏视觉节奏。
什么时候该用 overflow: auto 而不是 overflow: scroll
关键区别在于滚动条是否“按需出现”。overflow: scroll 会强制渲染横纵滚动条，哪怕内容根本没溢出；overflow: auto 则由浏览器自动判断——只在真实溢出时才显示对应方向的滚动条。
- 桌面端基本可靠，但 Safari 对
auto的判定偏保守：有时内容已超出却没触发滚动条，尤其在 flex 或 grid 子项中 - 移动端手势滚动默认启用，
overflow: auto不会影响原生滑动体验；而scroll可能导致双滚动条（系统自带 + CSS 强制） -
overflow: auto更省空间：不溢出时无滚动条占位，布局更干净
overflow: hidden 看似简单，但容易误伤交互
它不只是“隐藏多余内容”，还会切断事件流和视觉反馈。
- 绝对定位子元素若超出父容器，会被裁剪且无法响应
:hover或focus - 父元素设置
overflow: hidden可触发 BFC，顺便清除浮动——但这属于副作用，别当主要目的用 - 阴影（
box-shadow）、描边（outline）或transform移出区域的部分也会被裁掉 - 文字截断需配合
text-overflow: ellipsis，单靠hidden不会加省略号
水平/垂直方向必须分开控制？
不是必须，但经常需要。比如固定宽度的代码块允许横向滚动，但禁止纵向滚动；或导航菜单只允许垂直滚动。
立即学习“前端免费学习笔记（深入）”；
- 写成
overflow-x: auto; overflow-y: hidden;比overflow: auto hidden更清晰（后者是简写，易读性差） -
overflow-y: scroll在 macOS 上可能只显示细滚动条，但在 Windows 上会常驻粗条，影响宽度计算 - 嵌套滚动时，外层
overflow-y: auto+ 内层overflow-x: auto容易触发“滚动冲突”，用户拖拽时可能意外滚动外层
真正麻烦的是盒模型和 overflow 的联动：如果用了 box-sizing: content-box 又设了 padding，实际内容区比 width 小，更容易意外触发溢出。动手前先确认 box-sizing: border-box 是否已全局重置——这点比选哪个 overflow 值还容易被忽略。
