CSS overflow rationale

问题

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?

回答1:

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>

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)

^{Illustration of scroll overlapping content}

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>

From the specification:

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://stackoverflow.com/questions/57007497/css-overflow-rationale