CSS溢出原理 [英] CSS overflow rationale

问题描述

根据Mozilla对溢出"属性的描述:

From Mozilla's description of the "overflow" property:

将一个轴设置为可见(默认)，而将另一个轴设置为其他值会导致可见行为为自动.

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

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

I can't see any benefit of doing this, or any kind of problem that is circumvented with this. Why is this part of the specification?

推荐答案

考虑此示例，我们在两个方向上都有溢出:

Consider this example where we have overflow in both direction:

.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意味着我们在滚动查看时隐藏水平溢出并保持可见的垂直溢出，但是这里存在一个问题，因为垂直溢出的内容可能会覆盖滚动条(您无法再滚动查看一些内容)或相反的内容(滚动条将隐藏一些我们看不到的内容)

Adding overflow-x:scroll;overflow-y:visible means that we hide the horizontal overflow while having a scroll to see it AND keep the vertical overflow visible BUT we have an issue here because what is overflowing vertically can overlap the scroll bar (you cannot scroll anymore and see some of content) or the opposite (the scroll will hide some content that we cannot see)

^{滚动重叠内容的插图}

因此，如果其中一个属性设置为scroll或auto(它应该生成滚动)，则另一个属性需要执行相同的操作，因为它无法看到其溢出.

So if one of the property is set to scroll or auto (it should generate a scroll) the other one need to do the same as it cannot have its overflow visible.

.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之外，如果溢出x或溢出y之一既不是visible也不是clip ^参考

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

这篇关于CSS溢出原理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！