Firefox does not take vertical scrollbar width into account when calculating parent div size

4
votes

.scroll {
  position: absolute;
  left: 0;
  top: 0;
  background: yellow;
  overflow: auto;
  max-height: 100px;
}
<div class="scroll">
  <div>123456789</div>
  <div>123456789</div>
  <div>123456789</div>
  <div>123456789</div>
  <div>123456789</div>
  <div>123456789</div>
  <div>123456789</div>
</div>

Firefox 79

When the height of the div overflows, Firefox displays a vertical scrollbar without increasing the width of the div to accommodate it, causing a horizontal scrollbar to show.

Firefox screenshot

Chrome 84

Chrome increases the width of the div as expected and no horizontal scrollbar is shown.

Chrome screenshot

How can I make Firefox work like Chrome?

Constraints:

  • The width of the scroll div needs to match its content.
  • Overflow needs to be auto.

What I've tried:

  • min-width: 0/auto
  • Flexbox (to get the auto width)
  • Various combinations of extra wrapper divs
2
htmlcssfirefox
my chrome 84 is not giving the result you are showing - Temani Afif
Hmm, I can confirm Chrome's sizing is also a bit off. If you toggle the position: absolute style in dev tools it "fixes" itself, which tells me that it's probably a browser bug. But I wasn't experiencing that before. - Decade Moon

2 Answers

0
votes

.scroll {
    position: absolute;
    left: 0;
    top: 0;
    display:block;
    background: yellow;
        
    max-height: 100px;
    max-width:auto;
    overflow-y:auto;
    padding-right:18px;
 }
<div class="scroll">
  <div>123456789</div>
  <div>123456789</div>
  <div>123456789</div>
  <div>123456789</div>
  <div>123456789</div>
  <div>123456789</div>
  <div>123456789</div>
</div>
0
votes

Try to use:

width: fit-content;

or

width: min-content;

or

width: max-content;