使用float:right时Firefox渲染多余水平滚动条问题求解

当滚动条处于设置了float:right的元素内时，Firefox与Chrome对滚动条的渲染逻辑存在差异：

• Chrome会自动略微增加容器宽度，为垂直滚动条预留显示空间，仅展示垂直滚动条，不会触发多余的水平滚动条
• Firefox在不同系统、不同版本下表现不一致：部分版本会渲染出不必要的水平滚动条；部分新版本使用悬停显示的悬浮式滚动条，不会触发水平滚动条，但会遮挡部分文本内容

最小复现代码 #

HTML #

<div class="container">
  <div class="container-scrollable">
    <div class="entries">
      <div>1 - TEXT OF ENTRY</div>
      <div>2 - TEXT OF ENTRY</div>
      <div>3 - TEXT OF ENTRY</div>
      <div>4 - TEXT OF ENTRY</div>
      <div>5 - TEXT OF ENTRY</div>
      <div>6 - TEXT OF ENTRY</div>
      <div>7 - TEXT OF ENTRY</div>
      <div>8 - TEXT OF ENTRY</div>
      <div>9 - TEXT OF ENTRY</div>
    </div>
  </div>
</div>

CSS #

.container {
  float: right;
  border: 2px solid blue;
  padding: 5px;
  height: 90px;
}
.container-scrollable {
  overflow: auto;
  height: 100%;
}
.entries {
  white-space: nowrap;
  /*margin-right: 20px;*/
}

各环境渲染效果 #

• Windows 10 系统下 Firefox 102 版本：出现多余水平滚动条
  
• Ubuntu 20.04 系统下 Firefox 98 版本：出现多余水平滚动条
  
• Ubuntu 20.04 系统下 Firefox 102 版本：无水平滚动条，垂直滚动条仅在鼠标悬停时显示，会遮挡部分文本内容
  
• Ubuntu 20.04 与 Windows 10 系统下 Chrome 103 版本：无多余水平滚动条，滚动条不遮挡内容
  

方案1：手动为滚动条预留宽度（全版本兼容） #

给内容区添加右侧内边距，提前预留滚动条的显示位置，既可以避免内容宽度刚好撑满容器触发水平滚动，也能解决悬浮滚动条遮挡文本的问题。
修改.entries样式如下：

.entries {
  white-space: nowrap;
  /* 预留滚动条宽度，Windows默认经典滚动条宽度为17px，可根据实际场景调整数值 */
  padding-right: 17px;
}

该方案无浏览器兼容性问题，所有版本浏览器均可生效。

方案2：使用scrollbar-gutter属性（现代浏览器推荐） #

scrollbar-gutter是CSS专门为解决滚动条预留空间问题设计的属性，给滚动容器添加scrollbar-gutter: stable即可强制浏览器提前为滚动条预留固定位置，从规范层面解决不同浏览器的宽度计算差异：

.container-scrollable {
  overflow: auto;
  height: 100%;
  scrollbar-gutter: stable;
}

该属性在Chrome 94+、Firefox 97+版本均已支持，不需要硬编码滚动条宽度，可自动适配不同系统的滚动条样式。

方案3：直接禁用水平滚动条（适配特定场景） #

如果业务场景不需要横向滚动能力，可以直接给滚动容器设置水平方向溢出隐藏，从根源上避免水平滚动条出现：

.container-scrollable {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}

使用该方案需要确认内容不会因为宽度溢出被截断，仅适合内容宽度可控、不会超出容器的场景。

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