Firefox inline-flex with overflow gains whitespace

Question

When an element is set to display: inline-flex and has overflow set, Firefox is adding about 6px whitespace (similar to the 3px whitespace of normal inline elements).

Firefox

Chrome/Safari/Edge

Wondering if this is a bug with Firefox, or all other browsers?

Codepen: https://codepen.io/cloakedninjas/pen/XQMjvq

.wrapper {
  border: 1px red solid;
}

ul {
  margin: 0;
  display: inline-flex;
  list-style-type: none;
  overflow-x: auto; /* comment out to remove whitespace */
}

li {
  flex: 0 1 100px;
  margin-right: 10px;
  background: #eee;
}

<div class="wrapper">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>

Answer 1

Resetting vertical-align property fixes this. I guess the issue (the difference in behaviour with Firefox and other browsers) is this line in the spec¹:

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

Take a look at the below demo in Firefox and chrome - Firefox treats inline-flex also similar to the way it treats inline-block by using bottom margin as the baseline ²:

.wrapper {
  border: 1px red solid;
}

ul {
  margin: 0;
  display: inline-flex;
  list-style-type: none;
  overflow: auto;
  height: 50px;
}

li {
  flex: 0 1 100px;
  margin-right: 10px;
  background: #eee;
}

<div class="wrapper">
  inline
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>

Chrome:

Firefox:

Another interesting thread:

Why baseline of `inline-block` element with `overflow:hidden` is set to its bottom margin?

---

References

¹ Vertical Align: Vertical Align Spec

² CSS Working Group Editor Drafts: Spec doesn't say whether "overflow: [non-visible]" on flex/grid container triggers a different baseline (as it does for inline-block)