为什么 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

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

spec for overflow-x, overflow-y 说

Initial: visible
Computed value: as specified, except with visible/clip computing to auto/hidden (respectively) if one of overflow-x or overflow-y is neither visible nor clip.

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

width of the absolutely positioned ul确定为

left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = width of containing block

其中 left、right 和 width 是 auto，margin、border 和 paddings 是 0。在这种情况下，规范说明规则 3

... then the width is shrink-to-fit

并且在您的情况下收缩以适合解析为“首选宽度”，即内容的宽度。由于右填充为0，垂直滚动条无处可去，只能减少内容框的宽度。

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

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

为什么 Firefox 在需要垂直滚动条时添加水平滚动条？

Why does Firefox add horizontal scroll bars once vertical ones are needed?

css

firefox

scrollbar

horizontal-scrolling