为什么设置text-overflow且带滚动条的flex子元素在Firefox中无法自动撑开？

我有一个可滚动的<div>，内部包含多个列表项，这些项设置了溢出时显示省略号，整体结构放在一个绝对定位的容器中。

所有元素都未设置宽度限制，因此列表项应该可以完全撑开宽度，Chrome和Edge浏览器中表现符合预期，但Firefox中出现了如下异常：

我查阅了很多同类问题，常见解决方案是将flex子元素的min-width或min-height设置为非"auto"值，但该方案在我的场景中无效，可参考下方代码片段。

我怀疑问题和滚动条有关：当仅需展示2个项时不需要出现滚动条，但容器宽度依然和有滚动条时一致。

请问这个问题有什么可行的解决方案？

代码示例

.content {
    position: absolute;
    top: 20px;
    left: 20px;
    height: 60px;
    display: flex;
    flex-flow: column;
    border: 2px solid red;
}
.scroller {
    flex-shrink: 1;
    overflow-y: auto;
    background-color: gold;
    min-width: 0;
    min-height: 0;
}
.item {
    text-overflow: ellipsis;
    overflow: hidden;
}

<div class="content">
    <div class="scroller">
        <div class="item">a12345</div>
        <div class="item">b12345</div>
        <div class="item">c12345</div>
        <div class="item">d12345</div>
    </div>
</div>

问题原因 #

该差异源于不同浏览器对可滚动flex容器的宽度计算逻辑不同：Firefox会为设置了overflow-y: auto的容器预先预留垂直滚动条的宽度，即使当前内容高度未溢出、不需要显示滚动条，也会保留这部分宽度，Chromium内核的Chrome/Edge则只会在滚动条实际显示时才叠加宽度，因此出现了布局差异。

可行解决方案 #

方案1：使用fit-content限定容器宽度（推荐，兼容性最优） #

给.scroller添加width: fit-content属性，让容器宽度完全由内部内容撑开，同时补充.item缺失的white-space: nowrap（text-overflow: ellipsis必须配合该属性才能正常触发省略逻辑），修改后的CSS如下：

.content {
    position: absolute;
    top: 20px;
    left: 20px;
    height: 60px;
    display: flex;
    flex-flow: column;
    border: 2px solid red;
}
.scroller {
    flex-shrink: 1;
    overflow-y: auto;
    background-color: gold;
    min-height: 0;
    /* 新增属性 */
    width: fit-content;
}
.item {
    text-overflow: ellipsis;
    overflow: hidden;
    /* 新增属性，保证省略号生效 */
    white-space: nowrap;
}

该方案在所有主流浏览器中表现一致，内容未溢出时不会预留滚动条宽度，内容溢出时滚动条正常显示，宽度自动适配。

方案2：使用scrollbar系列属性调整滚动条行为（适合高版本浏览器场景） #

如果不需要兼容Firefox 96以下版本，可以通过调整滚动条的渲染规则解决问题，让滚动条悬浮在内容上方，不占用容器宽度：

.scroller {
    flex-shrink: 1;
    overflow-y: auto;
    background-color: gold;
    min-width: 0;
    min-height: 0;
    /* 新增属性 */
    scrollbar-gutter: overlay;
    scrollbar-width: thin; /* 可选，调整滚动条显示宽度 */
}

方案3：JS动态控制滚动属性（兼容极低版本场景） #

如果需要兼容非常老旧的Firefox版本，可以通过JS动态判断内容高度，切换滚动属性：

const scroller = document.querySelector('.scroller')
function adjustScrollerStyle() {
  scroller.style.overflowY = scroller.scrollHeight <= scroller.clientHeight ? 'hidden' : 'auto'
}
// 初始化时调用
adjustScrollerStyle()
// 如果容器内容会动态变更，可以新增MutationObserver监听内容变化，触发回调

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