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

Question

我有几个 flexboxes 并排设置，宽度相等：

<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

这里有一个快速修复：在 .child 元素上使用 overflow: hidden，应该强制 <pre> 元素遵守其父元素的计算宽度：

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

请参阅此处 fiddle：http://jsfiddle.net/teddyrised/gf9uLmc1/8/

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

In Firefox, preformatted text creates unwanted flexbox resizes

html

css

firefox

pre

flexbox