为什么带有文本溢出和滚动条的 Flex 子项在 Firefox 中无法展开？

Question

我有一个滚动的

<div>

，里面有很多项目。这些项目设置为在溢出时使用省略号。整个东西都在一个绝对定位的容器中。

任何宽度都没有限制，因此项目应该能够完全展开，就像在 Chrome 和 Edge 中一样。在 Firefox 中我得到这个：

我在这里看到了很多类似的问题，但常见的解决方案是将 Flex 子项的

min-width

或

min-height

设置为“auto”以外的其他值。在我的情况下，这不起作用（请参阅代码片段）。

我怀疑滚动条是问题所在。如果只有两个项目要显示，则没有滚动条，但框仍然是相同的宽度。

我该如何解决这个问题？

.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>

Answer 1

这样可以吗？

.content {
    position: absolute;
    top: 20px;
    left: 20px;
    min-width: 65px!important;
    height: 65px;
    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>

Answer 2

这是一个 Firefox 错误，早在 2012 年就已报告过，但至今仍未修复 - https://bugzilla.mozilla.org/show_bug.cgi?id=764076.

它不仅限于 Flexbox，甚至在文本区域中也会发生，解决方法是对具有

scrollbar-gutter: stable

的元素使用

overflow: auto

。当滚动条未使用时，这会增加一个可能不需要的空白区域，因此最好将此 hack 仅限于 Firefox：

/* workaround for Firefox bug #764076 */
@supports (-moz-appearance:none) {
  .scroller {
    scrollbar-gutter: stable;
  }
}

scrollbar-gutter 上的 MDN 文档