overflow生效需容器有明确宽高且内容真溢出；常见失效因无宽高、flex/grid布局未设min-size、内联元素未转块级；Y轴滚动用overflow-y，移动端需-webkit-overflow-scrolling: touch。
overflow 不是“设了就自动隐藏或滚动”，关键看容器有没有明确宽高和内容是否真的溢出。
overflow: hidden 为什么有时没效果？
常见现象：overflow: hidden 写了但文字/图片还是跑出盒子外，甚至页面宽度被撑开。
- 容器没设置
width或height（比如div默认 width: 100%，但 height: auto），overflow就不生效 - 父级是
display: flex或display: grid，子元素可能被拉伸，需额外加min-width: 0或min-height: 0才触发 overflow - 内联元素（如
span）不支持overflow，必须先设成display: block或inline-block - 文本溢出用
overflow: hidden只能裁剪，想显示省略号得配合white-space: nowrap+text-overflow: ellipsis
overflow: auto 和 overflow: scroll 有什么区别？
不是“auto 更智能”，而是滚动条的显隐逻辑不同，影响体验和布局。
-
overflow: auto：只在内容真正溢出时才显示滚动条，不占空间；但 Safari 下偶尔有兼容问题，可能始终不出现 -
overflow: scroll：无论是否溢出，都强制显示滚动条（哪怕空着），会固定占用约 16px 宽度（垂直滚动条），可能造成页面“晃动” - 移动端慎用
scroll：iOS Safari 的滚动条默认透明且不占位，行为和桌面端不一致
怎么让 overflow 滚动只作用于 Y 轴？
用 overflow-y 单独控制，但要注意它和 overflow-x 的联动规则。
-
overflow-y: auto+overflow-x: hidden是常见组合，防止横向滚动干扰阅读 - 如果
overflow-x设为hidden，而内容因换行或弹性布局产生水平溢出，Y 轴滚动可能失效（浏览器会优先保证内容可见） - Flex 容器里子项默认
flex-shrink: 1，有时比设overflow-y更有效——先让内容压缩，再考虑裁剪 - 绝对定位元素不受父级
overflow约束，除非父级是position: relative且自身未脱离文档流
移动端 touch 滚动卡顿怎么办？
原生 overflow: auto 在 iOS 和部分安卓 WebView 中默认不支持“惯性滚动”，需手动开启。
- 加
-webkit-overflow-scrolling: touch（仅 iOS 有效，已废弃但仍必要） - 现代方案推荐用
overscroll-behavior: contain防止滚动穿透，尤其弹窗场景 - 避免在滚动容器上监听
scroll事件做重计算，改用passive: true选项提升响应速度 - 大量 DOM 元素滚动会卡，优先考虑虚拟滚动（如
react-window），而不是硬扛 overflow
最常被忽略的一点：overflow 的生效前提是“块级格式化上下文（BFC）成立”，而浮动、绝对定位、display: inline-block 等都可能破坏它——所以看到 overflow 失效，先检查容器是否意外进入了非 BFC 状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
