overflow: hidden 失效主因是容器实际宽度超出视口，常见于 box-sizing: content-box、white-space: nowrap、伪元素/字体微溢出等；应统一用 border-box、检查 margin、用 max-width: 100% 替代 width: 100%，并优先修复布局缺陷而非掩盖滚动条。
为什么 overflow: hidden 有时根本没用？
直接加 overflow: hidden 却仍有横向滚动条，大概率不是样式没生效，而是容器实际宽度超出了视口。常见原因包括：box-sizing 默认是 content-box，导致 padding 或 border 被额外加到 width 上；或者子元素用了 white-space: nowrap、display: inline-block 且未设 vertical-align，引发隐式换行失效和溢出；还有可能是伪元素（如 ::before）或字体渲染产生的微小溢出（尤其在 Safari 中）。
实操建议：
– 所有根级容器统一加 box-sizing: border-box
– 检查是否有未重置的 margin（比如 body 默认外边距）
– 用浏览器开发者工具的「Layout」面板看真实尺寸，别只信 width: 100%
用 max-width: 100% 替代 width: 100% 更安全
width: 100% 是相对于父容器计算的，但若父容器本身因 padding/border 超出视口，子元素照样溢出；而 max-width: 100% 会强制限制其最大可用宽度为包含块的 content area 宽度，更贴合响应式意图。
典型场景：
– 图片、iframe、表格等固有宽高比元素
– 嵌套的 flex/grid 容器内部子项
– 第三方组件（如地图 SDK 的容器）无法修改内部结构时
示例：
.responsive-img {
max-width: 100%;
height: auto;
}
移动端 Safari 的 overflow: hidden 失效问题
iOS Safari 对 overflow: hidden 在 body 或 html 上的处理很特殊：它不会阻止页面整体横向滚动，尤其当存在 input 聚焦、键盘弹出或缩放操作后。这不是 bug，是 WebKit 的渲染策略。
