为何设置overflow-y:auto会导致水平溢出消失？如何解决？

场景复现 #

正常情况（符合预期） #

以下代码中，红色方块（.overflow）会水平溢出蓝色边框的外层容器（.outer）：

.overflow {
  margin-left: 50px;
  width: 100px;
  height: 100px;
  background: red;
}
.outer {
  /*overflow-y: auto; */
  width: 100px;
  height: 200px;
  border: 1px solid blue;
}

<div class="outer">
  <div class="overflow"></div>
</div>

异常情况（不符合预期） #

当取消注释overflow-y: auto;后，原本预期该属性仅控制垂直方向的溢出行为，但红色方块的水平溢出被隐藏了：

.overflow {
  margin-left: 50px;
  width: 100px;
  height: 100px;
  background: red;
}
.outer {
  overflow-y: auto;
  width: 100px;
  height: 200px;
  border: 1px solid blue;
}

<div class="outer">
  <div class="overflow"></div>
</div>

观察到的现象 #

• 设置overflow-x为任何值（unset、visible、scroll、hidden）都无法恢复水平溢出效果
• 只要overflow-y设置为除unset外的其他值，都会触发该现象

问题解答 #

1. 现象产生的原因 #

这是CSS规范的既定行为：当你为某一轴（如overflow-y）设置**非visible**的值（auto、scroll、hidden等）时，另一轴（overflow-x）的默认值会被隐式重置为auto，而不是保持原本的visible。

规范这样设计的目的是避免容器在某一轴设置了溢出控制后，另一轴的内容溢出导致布局混乱或不可控的显示问题。

2. 解决方案：保留垂直滚动同时允许水平溢出 #

最直接的方法是给外层容器添加一个额外的包裹元素，让包裹元素负责垂直滚动，原外层容器保持水平溢出的能力：

代码示例

.overflow {
  margin-left: 50px;
  width: 100px;
  height: 100px;
  background: red;
}
/* 新增的包裹元素，负责垂直滚动 */
.outer-scroll-wrap {
  overflow-y: auto;
  width: 100px;
  height: 200px;
}
/* 原外层容器，保持水平溢出 */
.outer {
  width: 100px;
  border: 1px solid blue;
}

<div class="outer-scroll-wrap">
  <div class="outer">
    <div class="overflow"></div>
  </div>
</div>

原理是：垂直滚动的逻辑由包裹元素承担，而原外层容器没有设置任何overflow限制，因此内部元素的水平溢出可以正常突破容器边界，同时垂直方向的内容超出时会触发包裹元素的滚动条。

内容的提问来源于stack exchange，提问作者Tiddo