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

Question

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

火狐

铬/Safari/边缘

想知道这是 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 和其他浏览器的行为差异）是规范¹中的这一行：

'inline-block' 的基线是它在正常流中的最后一个 line box 的基线，除非它没有 in-flow line box 或者它的 'overflow' 属性的计算值不是 'visible'，在在这种情况下，基线是底部边距边缘。

看看下面在 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>

铬：

火狐：

另一个有趣的话题：

为什么带有 `overflow:hidden` 的 `inline-block` 元素的基线设置为其底部边距？

---

参考

¹垂直对齐： 垂直对齐规范

² CSS 工作组编辑器草案：规范没有说明 flex/grid 容器上的“溢出：[非可见]”是否会触发不同的基线（就像内联块一样）