为什么一旦需要垂直滚动条，Firefox 会添加水平滚动条？

Question

我有一个带有最大高度的简单列表，因为如果项目太多，我想滚动它。不幸的是，一旦有足够的内容需要（垂直）滚动，Firefox 就会添加烦人的水平滚动条，而不是像人们期望的那样扩展元素（Chrome 确实这样做了！）

请注意，position: absolute; 是必需的；在我的实际代码中，这是单击相应按钮时显示的类似下拉菜单的元素的一部分。因此，虽然删除它可以解决问题，但它不是我正在寻找的解决方案。

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

您可能更喜欢 Chrome 的行为而不是 Firefox 的行为，但 Firefox 的行为是正确的。您也误认为 Chrome 正在扩大宽度。它不是，你可以看到内容实际上是水平滚动的，例如选择行尾的一些文本向右滚动，然后选择行首的一些文本向左滚动。

spec for overflow-x, overflow-y 说

首字母：可见
计算值：如指定的那样，如果溢出-x 或溢出-y 之一既不可见也不剪辑，则可见/剪辑计算为自动/隐藏（分别）除外。

您已将overflow-y 设置为auto，因此通过此overflow-x 也应该从可见更改为auto。

width of the absolutely positioned ul 被确定为

left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = 包含块的宽度

其中左、右和宽度为自动，边距、边框和填充为 0。在这种情况下，规范从规则 3 开始

...然后宽度缩小以适应

在您的情况下，缩小以适应会解析为“首选宽度”，即内容的宽度。由于右边距为 0，垂直滚动条无处可去，只能将内容框缩小宽度。

Chrome 和 Firefox 都在做这种缩减。由于 ul 的内容现在对于 ul 的框来说太宽了，因此内容变得可以水平滚动。

Chrome 错误地将 overflow-x 的计算值更改为“隐藏”，而不是“自动”，从而隐藏了水平滚动条。