Come impedire a un elemento flessibile di restringersi rispetto al suo contenuto?

Question

ho creato un jsfiddle per dimostrare il problema qui:
http://jsfiddle.net/x0eo3aeo/2/

HTML:

<div class="flexContainer"> 
    <div class="flexCol1">aaa</div> 
    <div class="flexCol2"><div style="width:100px; background-color:yellow;">bbb</div></div> 
    <div class="flexCol3"><div style="width:250px; background-color:pink;">Hello world, some long text here to make this element stay at 250px while splitting onto multiple lines.</div></div> 
</div> 

CSS:

.flexContainer { 
    display: flex; 
    width: 100%; 
    flex-direction: row; 
} 
.flexCol1, .flexCol3 { 
    flex: 1; 
    background-color: green; 
} 

Firefox si comporta in realtà esattamente come voglio. Le colonne 1 e 3 flettono allo stesso modo fino al la larghezza della colonna 3 raggiunge la dimensione fissa del suo figlio div e quindi solo la colonna 1 è flessa. Tuttavia, in Chrome, entrambe le colonne continuano a flettere in modo uniforme e il contenuto secondario della colonna 3 è in overflow.

C'è un modo per ottenere il comportamento in stile Firefox in modo cross-browser?

Answer 1

Dovresti essere in grado di raggiungere il comportamento di Firefox in Chrome aggiungendo min-width: -webkit-min-content; a .flexCol3. Ciò impedisce che si riduca al di sotto della larghezza del suo contenuto minimo. (Questo è ciò che dovrebbe succedere per impostazione predefinita, a causa di min-width:auto introdotta nelle specifiche FlexBox, ma che hasn't been implemented in Chrome ancora.)

Come notato nei commenti qui sotto, IE non sembra avere un min-content larghezza di parola chiave implementato, in modo da potrebbe dover fare qualcosa di hackier lì (come min-width: 250px). Fortunatamente, la prossima versione di IE (12?) Ha implementato min-width:auto, quindi questo dovrebbe funzionare come Firefox, mi è stato detto.