Firefox中绝对定位固定高度Div出现无用水平滚动条问题

问题场景 #

我正在开发一款多浏览器兼容的下拉菜单，输入框下方是绝对定位的div，内部包含可滚动的选项列表。在Firefox中给这个div设置固定高度（比如限制在视口内）并触发垂直滚动条时，会同时出现无用的水平滚动条。Edge里只显示垂直滚动条，但Firefox会多出水平滚动条。

我没法预先知道列表项宽度，不能设固定宽度；也不想给Firefox的div加内边距，因为没有垂直滚动条时右侧会留空白，而且列表项没法占满div宽度。

示例代码：

<div style="position: absolute; height: 150px; overflow: auto;">
 <div>SomeText0</div>
 <div>SomeText1</div>
 <div>SomeText2</div>
 <div>SomeText3</div>
 <div>SomeText4</div>
 <div>SomeText5</div>
 <div>SomeText6</div>
 <div>SomeText7</div>
 <div>SomeText8</div>
 <div>SomeText9</div>
</div>

解决方案 #

方法1：强制隐藏水平滚动条 #

给容器单独设置垂直滚动条自适应，同时强制隐藏水平滚动条，适合确认内容不会超出水平范围的场景：

.dropdown-container {
  position: absolute;
  height: 150px;
  overflow-y: auto;
  overflow-x: hidden;
}

方法2：使用scrollbar-gutter预留滚动条空间 #

这是CSS原生解决方案，能在容器一侧预留滚动条宽度，无论滚动条是否存在，内容区域宽度保持一致，从根源避免水平滚动条出现（Firefox 64+、Chrome 94+支持）：

.dropdown-container {
  position: absolute;
  height: 150px;
  overflow: auto;
  scrollbar-gutter: stable;
}

方法3：确保内部列表项宽度适配容器 #

配合方法1使用，让内部列表项强制占满容器宽度，防止内容溢出：

.dropdown-container {
  position: absolute;
  height: 150px;
  overflow-y: auto;
  overflow-x: hidden;
}
.dropdown-container > div {
  box-sizing: border-box;
  width: 100%;
}

内容的提问来源于stack exchange，提问作者user3044553