css - CSS 溢出原理

Question

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

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

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

标签： cssoverflow

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>

从规范：

计算值：如指定，除了visible/clip计算到auto/ hidden（分别）如果 overflow-x 或 overflow-y 之一既不是visible也不是clip ^ref