大小适合其内容的可滚动元素*包括*滚动条答案

【问题标题】：Scrollable element whose size fits its content *including* the scrollbar大小适合其内容的可滚动元素*包括*滚动条
【发布时间】：2026-01-14 04:10:01
【问题描述】：

为了显示完成列表，我需要一个绝对定位的元素来获取其内容的宽度，并在必要时垂直滚动。问题是 CSS 计算绝对定位元素宽度的方式似乎没有为滚动条留出空间，导致最宽补全的最后一个字符隐藏在滚动条下方（在滚动条占用空间的平台上）。

（编辑：有人向我指出，这在 Chrome 中默认有效，尽管 Firefox 和 Safari 仍然存在问题。这可能不是标准 CSS 的问题，而是实现。）

样式看起来像这样，completion-list 中包含一系列 completion 元素：

  .completion-list {
    overflow: hidden auto;
    max-height: 5em;
    position: absolute;
  }
  .completion {
    white-space: nowrap;
  }

您可以在this codesandbox 中看到它的实际效果。

添加一个填充来为滚动条腾出空间并不是一个很好的解决方案，因为当没有滚动条时它也会显示出来（滚动条的宽度取决于平台）。我真的不想使用 JavaScript 来动态测量空间中的条形宽度和 kludge。

【问题讨论】：

嗨！你的工作的忠实粉丝！给您的建议：您可以使用 Stack Snippets（[<>] 工具栏按钮）使您的示例可运行，而不是使用站外链接； here's how to do one。异地链接的问题是人们不应该去异地来帮助你。某些网站被某些用户屏蔽；和链接腐烂，使问题及其答案对未来的人们毫无用处。
这只是 Firefox 的问题，不是吗？你的 Codesandbox 在 Chrome 上似乎没问题
现在不能解决您的问题，但可能会在将来解决。您可以使用scrollbar-gutter: stable; 自动为滚动条保留空间（请参阅ishadeed.com/article/custom-scrollbars-css/#scrollbar-gutter）。这比手动填充要好得多！不幸的是，它现在只有 Chrome 支持
确实，它似乎在最近的 Chrome 版本中运行得很好。尚未测试 Safari，但 Ephiphany（也是基于 webkit 的）似乎确实存在问题。

标签： css

【解决方案1】：

在 MacOS 上测试了 Safari、Chrome 和 Firefox。滚动条占用零空间。它在滚动时与文本重叠，但在您停止滚动时消失。这种用户体验我完全没有问题。

【讨论】：