CSS溢出原理

Question

根据Mozilla对“溢出”属性的描述：

  

将一个轴设置为可见（默认），而将另一个轴设置为其他值会导致可见行为为自动。

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

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>

根据规范：

  

计算值：如指定，除非{x1或xy之一都不是visible / clip分别计算为auto / hidden visible或clip ^ref