CSS 溢出原理

Mozilla 对“overflow”属性的描述：

将一个轴设置为可见（默认），同时将另一个轴设置为不同的值会导致可见行为为自动。

我看不出这样做有任何好处，也看不到由此可以避免的任何问题。为什么是规范的这一部分？

考虑这个例子，我们在两个方向上都有溢出：

.box {
 border:1px solid;
 width:200px;
 height:200px;
}
.box:before {
  content:"";
  display:block;
  height:150%;
  width:150%;
  background:red;
}

<div class="box">

</div>

Adding overflow-x:scroll;overflow-y:visible意味着我们隐藏水平溢出，同时滚动查看它并保持垂直溢出可见，但我们这里有一个问题，因为垂直溢出的内容可能与滚动条重叠（您无法再滚动并看到某些内容）或相反（滚动会隐藏一些我们看不到的内容）

^{Illustration of scroll overlapping content}

因此，如果其中一个属性设置为scroll or auto（它应该生成一个滚动）另一个需要执行相同的操作，因为它不能使其溢出可见。

.box {
 border:1px solid;
 width:200px;
 height:200px;
 overflow-x:scroll;
 overflow-y:visible;
}
.box:before {
  content:"";
  display:block;
  height:150%;
  width:150%;
  background:red;
}

<div class="box">

</div>

从规格来看：

Computed value: as specified, except with visible/clip computing to auto/hidden (respectively) if one of overflow-x or overflow-y is neither visible nor clip ^{ref https://drafts.csswg.org/css-overflow-3/#overflow-properties}