overflow-x 和 overflow-y 不能随意组合，visible 会自动转为 auto；有效解法是嵌套容器分离控制、overflow:hidden 配合负 margin/padding、或改用 overflow-y:auto 加 max-height。
直接说结论：overflow-x 和 overflow-y 不能随意组合，只要其中一个是 visible、另一个是 auto 或 scroll（甚至 hidden），浏览器就会把 visible 自动转成 auto —— 这不是 bug，是 W3C 明确规定的计算行为。
为什么 overflow-x: hidden; overflow-y: visible 不生效
根本原因是 CSS 规范限制：当两个方向的溢出值存在冲突时，visible 会被“降级”为 auto。比如：
-
overflow-x: hidden; overflow-y: visible→ 实际计算结果是overflow-y: auto -
overflow-x: visible; overflow-y: auto→ 实际也是overflow-x: auto - 连
visible+hidden组合在 Gecko/Safari/Opera 中也会触发该规则
你可以用 DevTools 的 Computed 面板验证：明明写了 visible，但 computed 值显示的是 auto。
真正能落地的三种解法
别再试“加 !important”或“换顺序”了，这些没用。有效方案只有以下几种，按推荐度排序：
立即学习“前端免费学习笔记（深入）”；
- 用嵌套容器分离控制权：外层容器设
overflow-y: visible，内层设overflow-x: hidden；注意外层必须有明确高度或 BFC 上下文（比如加display: flow-root或overflow: hidden） - 改用
overflow: hidden+ 负 margin / padding 技巧（如padding-bottom: 250px; margin-bottom: -250px），仅适用于内容高度固定、且不需要 Y 轴滚动的场景 - 放弃
visible，改用overflow-y: auto并配合max-height控制截断点 —— 大多数真实业务中，“视觉上像 visible”比“语义上是 visible”更重要
移动端特别容易踩的坑
在 iOS 或 Chrome DevTools 模拟小屏时，body { overflow-x: hidden } 几乎一定失效，因为：
- 它不创建 BFC，子元素横向溢出会“穿透”到视口
- 真正起作用的是最靠近溢出源的、有尺寸约束的父容器（比如
#panels） - 记得加
-webkit-overflow-scrolling: touch，否则 iOS 滚动卡顿 -
viewportmeta 标签缺失或被覆盖，会导致整个布局缩放逻辑错乱，让 overflow 行为不可预测
overflow 失效还可能跟定位有关
如果你的元素内部有 position: absolute 子元素，而父级又设置了 overflow: auto 或类似值，那这个子元素很可能逃逸裁剪区域——因为 overflow 对脱离文档流的元素无效。
解决方式只有两个：
- 让绝对定位元素的包含块（containing block）变成那个带
overflow的父级（即给父级加position: relative或transform: translateZ(0)） - 或者把绝对定位元素移出该父级，放到更高层级的 DOM 中（比如挂到
body下），再用 JS 动态计算位置
真正难的从来不是写哪一行 CSS，而是判断“谁该负责裁剪”“谁才是包含块”“谁在创建 BFC”。这几个问题没理清，光调 overflow 值只会越调越乱。
