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

Question

当一个元素设置为 display: inline-flex 并且设置了 overflow 时，Firefox 会添加大约 6px 的空白(类似于普通内联元素的 3px 空白) .

火狐

Chrome/Safari/Edge

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

代码笔: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 属性修复这个问题。我想问题(Firefox 和其他浏览器的行为差异)是规范¹ 中的这一行:

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.

看看下面在 Firefox 和 chrome 中的演示 - Firefox 对待 inline-flex 的方式也类似于它通过使用 bottom 对待 inline-block 的方式margin 为基线 ²:

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