Firefox中overflow:auto的inline-block元素滚动栏遮挡内容问题

我需要一个纯CSS解决方案来解决以下问题：外层DIV设置为inline-block，overflow-y:auto、overflow-x:hidden且未固定宽度，内部嵌套8个内层DIV。Windows系统下的Firefox浏览器中，滚动栏会遮挡最宽行的可滚动内容，其他测试浏览器无此表现。

测试代码 #

CSS #

.outer {
  display: inline-block;
  border: 1px solid #000;
  height: 6lh;
  overflow-x: hidden;
  overflow-y: auto;
}

.inner {
  padding: 2px 5px;
  text-wrap: nowrap;
}

HTML #

<div id="outer" class="outer">
    <div id="inner" class='inner'>short</div>
    <div class='inner'>longer</div>
    <div class='inner'>another</div>
    <div class='inner'>medium</div>
    <div class='inner'>overflow</div>
    <div class='inner'>inline</div>
    <div class='inner'>scrollbar</div>
    <div class='inner'>incomprehensibility</div>
</div>

Firefox下DIV的上报尺寸 #

其他浏览器下DIV的上报尺寸（outer的offsetWidth因浏览器滚动栏宽度略有差异） #

内容较短无需滚动时的测试代码 #

此时Firefox与其他浏览器表现一致。

CSS #

.outer {
  display: inline-block;
  border: 1px solid #000;
  height: 6lh;
  overflow-x: hidden;
  overflow-y: auto;
}

.inner {
  padding: 2px 5px;
  text-wrap: nowrap;
}

HTML #

<div id="outer" class="outer">
    <div id="inner" class='inner'>short</div>
    <div class='inner'>incomprehensibility</div>
</div>

已尝试方案 #

试过调整grid、flex、transform等CSS属性均无效，目前仅能通过JavaScript调整尺寸解决，现寻求纯CSS方案。

测试浏览器 #

• 桌面端：Chrome 133.0.6943.142、Edge 133.0.3065.92、Firefox 135.0.1、Opera 117.0.5408.53、Safari 18.2
• 移动端：Chrome 132.0.6834.80、Dolphin 12.4.1、Firefox 135.0.1、Samsung Internet 27.0.0.79

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