CSS 溢出原理

Question

来自 Mozilla 对“溢出”属性的描述:

Setting one axis to visible (the default) while setting the other to a different value results in visible behaving as auto.

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

Answer 1

考虑这个我们在两个方向都有溢出的例子:

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

<div class="box">

</div>

添加 overflow-x:scroll;overflow-y:visible 意味着我们隐藏了水平溢出，同时有一个滚动来查看它并保持垂直溢出可见但是我们在这里有一个问题，因为什么垂直溢出可以覆盖滚动条(你不能再滚动看到一些内容)或者相反(滚动会隐藏一些我们看不到的内容)

^{滚动重叠内容说明}

因此，如果其中一个属性设置为 scroll 或 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