为啥带有文本溢出和滚动条的 flex 子项不会在 Firefox 中展开？

Posted 2023-03-06

【中文标题】为啥带有文本溢出和滚动条的 flex 子项不会在 Firefox 中展开？

【英文标题】：Why does a flex child with text-overflow and a scrollbar not expand in Firefox?为什么带有文本溢出和滚动条的 flex 子项不会在 Firefox 中展开？

【发布时间】：2021-11-02 03:18:15

【问题描述】：

我有一个滚动的<div>，其中包含许多项目。这些项目设置为在溢出时使用省略号。整个东西都在一个绝对定位的容器中。

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

我在这里看到了许多类似的问题，但常见的解决方案是将 flex child 的 min-width 或 min-height 设置为“auto”以外的其他值。在我的情况下，这不起作用（参见代码 sn-p）。

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

我该如何解决这个问题？

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

【参考方案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>

【讨论】：

谢谢，但是容器在这里有一个明确的width 设置，它可以防止它根据项目的长度扩展或收缩。这种方式违背了目的。

mabye 添加 !important 到 min-width: ?为什么 min-width 在您的情况下不起作用？

!important 仅对覆盖有用（即，如果 min-width 已在别处设置）。至于为什么它不起作用......我希望我知道。它只是对结果没有影响。