Why does Firefox add horizontal scroll bars once vertical ones are needed?

Question

I have a somewhat simple list with a max height since I want to scroll it if there are too many items. Unfortunately, Firefox add annoying horizontal scroll bars as soon as there's enough content to require (vertical) scrolling, instead of just expanding the element as one would expect (and Chrome actually does!)

Note that the position: absolute; is needed; in my actual code this is part of a dropdown like element that that is shown when clicking the corresponding button. So while removing it fixes the issue, it's not the solution I'm looking for.

ul {
  max-height: 5em;
  overflow-y: auto;
  position: absolute;
  font-family: Arial;
}

ul > li {
  white-space: nowrap;
}

<ul>
  <li>This is a long test to cause scroll</li>
  <li>This is a long test to cause scroll</li>
  <li>This is a long test to cause scroll</li>
  <li>This is a long test to cause scroll</li>
  <li>This is a long test to cause scroll</li>
  <li>This is a long test to cause scroll</li>
</ul>

Answer 1

You might prefer Chrome's behaviour to Firefox's but Firefox behaviour is the correct one. You're also mistaken that Chrome is expanding the width. It isn't, and you can see that the content is actually horizontally scrollable by e.g. selecting some text to the end of a line to scroll to the right, and then selecting some text to the start of a line to scroll to the left.

The spec for overflow-x, overflow-y says

Initial: visible
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.

You've set overflow-y to auto, so by this overflow-x should be changed from visible to auto too.

The width of the absolutely positioned ul is determined as

left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = width of containing block

where left, right and width are auto, and the margin, border and paddings are 0. In this case the spec says from rule 3

... then the width is shrink-to-fit

and shrink-to-fit in your case resolves to the "preferred width", which is the width of the content. Since the right padding is 0, the vertical scrollbar has nowhere to go but to reduce the content box by its width.

Both Chrome and Firefox are doing this reduction. Since the ul's content is now too wide for the ul's box, the content becomes horizontally scrollable.

Chrome is erroneously changing the computed value of overflow-x to "hidden", rather than "auto", thus hiding the horizontal scrollbar.