绝对定位可滚动元素宽度未包含滚动条导致内容遮挡问题求解

问题本质 #

绝对定位元素设置overflow: auto且内容高度超出max-height触发垂直滚动条时，Firefox、Safari不会将滚动条宽度纳入元素宽度的计算范围，导致最宽的内容末尾被滚动条遮挡，Chrome已做额外适配不存在该问题。

方案1：使用scrollbar-gutter属性（推荐） #

该属性是CSS标准提供的专门用于处理滚动条空间预留的能力，仅需添加一行属性即可解决问题：

.completion-list {
  overflow: hidden auto;
  max-height: 5em;
  position: absolute;
  /* 新增属性，自动预留对应平台滚动条宽度的空间 */
  scrollbar-gutter: stable;
}
.completion {
  white-space: nowrap;
}

• 浏览器自动匹配当前平台的滚动条宽度，无需手动指定数值，不存在跨平台适配问题
• 兼容性覆盖 Chrome 94+、Firefox 97+、Safari 15.4+，覆盖绝大多数主流用户群体
• 若不需要无滚动条时也预留位置避免布局跳动，可将值改为scrollbar-gutter: auto，仅在滚动条出现时预留空间

方案2：双层容器嵌套兼容方案 #

若需要兼容更低版本的老旧浏览器，可通过拆分定位和滚动能力的双层结构规避问题：

修改DOM结构 #

<div class="completion-list">
  <div class="completion-scroll-wrapper">
    <div class="completion">补全选项1</div>
    <div class="completion">补全选项2</div>
    <!-- 更多补全项 -->
  </div>
</div>

对应CSS样式 #

/* 外层仅负责绝对定位，宽度由内容自动撑开 */
.completion-list {
  position: absolute;
}
/* 内层仅负责滚动逻辑，不影响外层宽度计算 */
.completion-scroll-wrapper {
  overflow: hidden auto;
  max-height: 5em;
}
.completion {
  white-space: nowrap;
}

• 原理：外层容器的宽度完全由内部补全项的最大宽度决定，滚动条仅在内层已确定宽度的容器内展示，不会挤压内容导致遮挡
• 兼容性极佳，支持所有主流浏览器版本，无需处理滚动条宽度差异问题

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