Come evitare che gli elementi flex css diventino più piccoli del loro contenuto?

Question

sto cercando di utilizzare il layout flessibile con due elementi flessibili:

• Flex punto 1 è piena fase di esecuzione con contenuti dinamici (dovrebbe essere grande come il suo contenuto interno)
• voce Flex 2 dovrebbe prendere lo spazio rimanente

in qualche modo Firefox (e Chrome) stanno ignorando la larghezza interna di elementi figlio, che porta ad elementi che si sovrappongono (IE funziona come previsto) (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> 

La larghezza di 200 px è solo un esempio, non conosco la larghezza esatta in fase di esecuzione.

A Developer Mozilla Ho anche trovato

Per garantire una dimensione predefinita minumum ragionevoli per gli elementi flessibili, utilizzare min-width: auto e/o min-height: auto. Per gli elementi flessibili, il valore dell'attributo automatico calcola la larghezza/altezza minima dell'elemento non inferiore alla larghezza/altezza del suo contenuto, garantendo che l'elemento sia reso sufficientemente grande da contenere il contenuto. Vedi min-width e min-height per maggiori dettagli.

Ho sperimentato valori diversi, ma il risultato è stato lo stesso.

È questo in base alla progettazione o in che modo è possibile evitare che le css flex box diventino più piccole del loro contenuto?

EDIT: Sembra che ora sia correttamente implementato in Firefox/Chrome.

Answer 1

semplicemente ignorare flex e utilizzare questo:

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

quando si imposta la larghezza al 100%, la voce successiva sarà sotto il primo. poiché abbiamo utilizzato un altro div per contenuto interno, occuperanno lo spazio necessario ...

Answer 2

Se entrambe le colonne sono importanti, è possibile utilizzare max-width per aumentare/ridurre la larghezza.

Working Demo

Codice

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