在Firefox中，预先格式化的文本会创建不需要的flexbox调整大小

Question

我有几个柔性盒设置的宽度相等，并排：

<div id="parent">
    <div class="child"></div>
    <div class="child">
        <pre>Lorem ipsum dolor sit amet ...</pre>
    </div>
</div>

#parent {
    width: 600px;
    height: 200px;
    display: flex;
}

.child {
    flex: 1;
}

这是JSFiddle。

注意：在下面的两张图片中，顶部标有一个<pre>块，底部有一个<p>块供比较。

在Chrome中，向一个子div添加包含大量文本的<pre>元素不会影响任何div（子级或父级）的大小。这就是我想要发生的事情，因为我可以将overflow设置为scroll并创建一个可滚动的<pre>块。这是Chrome中的样子（好）：

但是在Firefox中，<pre>元素所在的flexbox的宽度会调整为文本的自然宽度，正如您在上面的部分所示（不好）：

有没有人知道Firefox的解决方法，我可以阻止它在预先格式化文本时改变flexbox的宽度？

Answer 1

如果要禁用此行为，只需给出灵活项目min-width：0。

.child {
    flex: 1;
    min-width:0;
}

#parent {
    width: 600px;
    height: 200px;
    display: flex;
    
    margin-bottom: 15px;
}

.child:nth-child(even) {
    background-color: green;
}

.child:nth-child(odd) {
    background-color: purple;
}

.child {
    flex: 1;
    min-width:0;
}

pre {
    overflow-x: scroll;
}

<div id="parent">
    <div class="child">
    </div>
    <div class="child">
<pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim, libero a egestas bibendum, nisl dolor mollis ante, quis aliquam mi felis in sapien. Fusce bibendum, nunc non sagittis tincidunt, est justo auctor felis, vel aliquet ex est et enim. Aliquam lacinia pellentesque sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque vel dui eros.
        </pre>
    </div>
</div>


<div id="parent">
    <div class="child">
    </div>
    <div class="child">
        
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim, libero a egestas bibendum, nisl dolor mollis ante, quis aliquam mi felis in sapien. Fusce bibendum, nunc non sagittis tincidunt, est justo auctor felis, vel aliquet ex est et enim. Aliquam lacinia pellentesque sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque vel dui eros.
        </p>
    </div>
</div>

Answer 2

以下是一个快速解决方法：在overflow: hidden元素上使用.child，应强制<pre>元素尊重其父级的计算宽度：

.child {
    flex: 1;
    overflow: hidden;
}

请参阅此处的小提琴：Andy