In Firefox, preformatted text creates unwanted flexbox resizes

Question

I have a couple flexboxes set up with equal width, side by side:

<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;
}

Here is a JSFiddle.

Note: in both images below, the top section has a <pre> block in it and the bottom section has a <p> block for comparison.

In Chrome, adding a <pre> element with lots of text to one child div does not affect the size of any divs (child or parent). This is what I'd like to happen, because I can then set overflow to scroll and create a scrollable <pre> block. Here's what it looks like in Chrome (good):

But in Firefox, the width of the flexbox that the <pre> element is in is resized to whatever the natural width of the text is, as you can see in the top section here (bad):

Does anyone know a workaround for Firefox where I can stop it from changing the width of the flexbox when there is preformatted text in it?

Answer 1

If you want to disable this behavior, just give the flex item 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>