Why does setting `overflow-y: auto` cause _horizontal_ overflow to dissappear, and how to fix this?

Question

Consider:

.overflow {
  margin-left: 50px;
  width: 100px;
  height: 100px;
  background: red;
}
.outer {
  /*overflow-y: auto; */
  width: 100px;
  height: 200px;
  border: 1px solid blue;
}

<div class="outer">
  <div class="overflow">
  </div>
</div>

This renders a red square (the .overflow) that horizontally overflows the blue rectange (.outer), as expected.

Now when I now uncomment overflow-y: auto;, then I expect this to only affect vertical overflow, and thus I expect the red square to keep overflowing horizontally.

However, that's not what happens:

.overflow {
  margin-left: 50px;
  width: 100px;
  height: 100px;
  background: red;
}
.outer {
  overflow-y: auto;
  width: 100px;
  height: 200px;
  border: 1px solid blue;
}

<div class="outer">
  <div class="overflow">
  </div>
</div>

It seems that:

Setting overflow-x has no effect on this (unset, visible, scroll, hidden - none of them work).
Setting overflow-y to anything other than unset triggers this behaviour

So my questions are:

Why is that?
How can I avoid this? I.e. how can I have overflow-y: auto, while still allowing horizontal overflow.

Tiddo · Answer 1 · 2023-04-12T07:41:29.847

And of course I find the answer just minutes after posting the question.

From MDN on overflow-x (and overflow-y)

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

So if overflow-y is neither visible nor clip, then overflow-x cannot be visible. Setting it to visible will just change it to auto effectively

I don't think there's a good general purpose solution, but one approach that works in some cases is to introduce an extra wrapper div for the overflow-y, and mess about with negative margins to allow horizontal overflow. Something like this:

.overflow {
  margin-left: 50px;
  width: 100px;
  height: 100px;
  background: red;
}
.outer {
  width: 100px;
  height: 200px;
  border: 1px solid blue;
}
.wrapper {    
  /* 
   * Margin should be big enough to accomodate any intended overflow
   * Padding must be equal to margin
   */
  margin-right: -500px;
  padding-right: 500px;
  overflow-y: auto;
}

<div class="wrapper">
  <div class="outer">
    <div class="overflow">
    </div>
  </div>
</div>

Why does setting `overflow-y: auto` cause _horizontal_ overflow to dissappear, and how to fix this?

1 Answers1