flex-box: termoretraibile prima dell'involucro

Question

Ho un layout con più colonne, di cui alcune sono fisse e altre si allungano secondo necessità. Pertanto, io uso Flexbox. Inoltre, voglio e ho bisogno di usare il flex-wrap.

La struttura è come questo:

<div class="row" style="display: flex; flex-flow: row wrap"> 
    <div class="column fixed" style="flex: 0 0 auto"></div> 
    <div class="column stretch" style="flex: 1 1 auto"></div> 
    <div class="column fixed" style="flex: 0 0 auto"></div> 
</div> 

Si prega di vedere http://jsfiddle.net/mh3rypqj/1/

Ora tutto funziona come previsto finché stiamo parlando di div vuoti. Una volta che metto una p nella colonna stretch, il wrapping e il restringimento si comportano diversamente.

Il mio comportamento previsto quando lo spazio è ridotto: Primo restringimento, quindi avvolgere. Riduci il .stretch. Una volta raggiunta la larghezza minima, avvolgere gli elementi.

Il comportamento che ottengo una volta ho messo il p in. Estensione: Prima avvolgere, quindi ridursi. La riga viene prima avvolta. Il restringimento avviene solo dopo che tutto è stato avvolto.

Desidero avere Primo restringimento, quindi avvolgere. In breve, voglio che la seconda riga del JSFiddle si comporti come la prima. Cosa devo fare?

Answer 1

Set flex-basis pari a min-width:

.column.stretch { 
    flex: 1 1 100px; /* or 1 0 100px, and no more need in min-width at all */ 
    max-width: 300px; 
    min-width: 100px; 
    background: red; 
} 

edited JSfiddle example

Answer 2

Quando si utilizza flex-flusso, riducendo sempre e solo accade DOPO viene raggiunta la dimensione flex-base. Quindi, impostare flex-base: 100px come suggerito sopra, significa che vuoi che la linea inizi a girare una volta che non c'è abbastanza spazio per tutti gli elementi, inclusa la base 100px di quella colonna. Quando la stanza si esaurisce, gli oggetti si avvolgeranno su una nuova linea. Quando lo spazio si esaurisce, si formerà una nuova linea. Questo continua fino a quando ogni elemento ha la propria linea. Solo allora - se c'è ancora non lo spazio per la base - gli articoli inizieranno a ridursi.

La ragione per cui si sta osservando una differenza con il paragrafo del contenuto è perché non si sta impostando esplicitamente una base flessibile. Se flex-base è impostato su auto, riporterà alla larghezza dell'oggetto. Se la larghezza non è impostata, la base torna alle dimensioni dell'oggetto una volta che il suo contenuto è stato reso, quindi corretto dalla larghezza minima e massima. Quindi 300 px in questo caso perché si imposta una larghezza massima. Si noti che se si toglie la larghezza massima, l'oggetto ottiene una larghezza pari al 100% e viene immediatamente scaricato nella propria linea. Quindi quando ridimensioni la pagina, quell'elemento inizia a ridursi perché ha già una sua linea e non c'è abbastanza spazio per quella dimensione iniziale.

Spero che questo aiuti!