带有溢出功能的Firefox inline-flex获得空白

Question

当元素设置为display: inline-flex并设置了overflow时，Firefox将添加大约6px的空格（类似于普通内联元素的3px的空格）。

Firefox

Chrome / Safari / Edge

想知道这是Firefox还是其他所有浏览器的错误？

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

重置vertical-align属性修复。我猜是 issue （与Firefox和其他浏览器的行为差异）是规范 ¹ 中的这一行：

  

“内联代码块”的基线是其最后一行框的基线   正常流中，除非它没有流内线盒或   其“溢出”属性的计算值不是“可见”，   在这种情况下，基线是下边缘边缘。

看看下面在Firefox和chrome中的演示- Firefox使用底边距作为基线，对待inline-flex的方式也类似于对待inline-block的方式 ² ：

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

另一个有趣的线程：

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

---

参考文献

¹ 垂直对齐：Vertical Align Spec

² CSS工作组编辑器草案：Spec doesn't say whether "overflow: [non-visible]" on flex/grid container triggers a different baseline (as it does for inline-block)