How to prevent css flex items to get smaller than their content?

Question

I'm trying to use flex layout with two flex items:

• Flex item 1 is filled during run-time with dynamic content (should be as big as its inner content)
• Flex item 2 should take the remaining space

Somehow Firefox (and Chrome) are ignoring the inner width of child elements, which leads to overlapping elements (IE works as expected) ( Fiddle ):

<div style="display: flex;">
    <!-- As suggested at https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes -->
    <div style="min-width: auto">
        <div style="width: 200px; background-color: green;">Dynamic Content</div>
    </div>
    <div style="flex-grow: 1; border: 1px solid #888;">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
</div>

The width of 200px are just an example, I don't know the exact width at runtime.

At Developer Mozilla I also found

To ensure a reasonable default minumum size for flex items, use min-width:auto and/or min-height:auto. For flex items, the auto attribute value calculates the minimum width/height of the item to be no less than the width/height of its content, guaranteeing that the item is rendered large enough to hold the content. See min-width and min-height for more details.

I experimented with different values, but the result was the same.

Is this by design or how can I prevent css flex boxes to get smaller than their content?

EDIT: It seems that this is now properly implemented in Firefox / Chrome.

Answer 1

just ignore flex and use this :

<div style="width:100%;">
<!-- As suggested at https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes -->
<div style="min-width: auto">
    <div style="width: 200px; background-color: green;">Dynamic Content</div>
</div>
<div style="flex-grow: 1; border: 1px solid #888;">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

when you set the width to 100% ,the next item will be under the first one. since we used another div for inner content ,they will take necessary space ...

Answer 2

If the both columns are important you can use max-width to increase/decrease the width.

Working Demo

Code

<div style="display: flex; width:100%;">
    <div style="max-width: 50%">
        <div style="background-color: green;">Dynamic Content</div>
    </div>
    <div style="border: 1px solid #888; max-width: 50%;">
        Lorem ipsum dolor sit amet
    </div>
</div>