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

Question

.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.

Chrome 84

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

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

Trigonous

my chrome 84 is not giving the result you are showing – Bronk

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. – Trigonous

See bugzilla.mozilla.org/show_bug.cgi?id=764076. – Rebekahrebekkah

Answer 1

A workaround that will, depending on your use case, potentially help is setting scrollbar-gutter: stable; which will reserve space for the scrollbar (thus adding it to the parent sizing as desired in this question). But this space is always reserved, even when there should be no scrollbar because content isn't overflowing. If you want that space to only show up when the element actually has overflowing content that makes it scroll, unfortunately scrollbar-gutter: auto; doesn't help because it runs into the same Firefox bug.

With some cleverness, you might be able to use media queries or container queries to hack together some conditional way of applying the scrollbar-gutter: stable; declaration.

According to the Firefox tracking bug, this is indeed a deviation from the CSS spec but it's unfortunately not a high-priority issue so we may have to wait years longer for a fix. It's currently prioritized at S3: "(Normal) Blocks non-critical functionality or a work around exists".

Nor

Answer 2

.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>

Cordage

Thanks, but the padding-right: 18px will apply even when the vertical scrollbar is not shown. – Trigonous

Are you able to find a fix?. I got stuck with this. And, i cannot use javascript and need to fix usng CSS only. – Fanti

Answer 3

Try to use:

width: fit-content;

or

width: min-content;

or

width: max-content;

Brundage

Why we need add this? . Can you please give explanation?. I changed as you suggested, but, No use. – Fanti

This proposed solution does not work. – Nor