Differenza tra larghezza e flex-base

Question

Ho riscontrato differenze di comportamento tra width e flex-basis che non sono in grado di spiegare con What are the differences between flex-basis and width?.

.outer { 
 
    display: flex; 
 
    background: yellow; 
 
    padding: 10px; 
 
} 
 
.middle { 
 
    display: flex; 
 
    flex-shrink: 0; 
 
    background: red; 
 
    padding: 10px; 
 
} 
 
.inner { 
 
    flex-basis: 258px; 
 
    flex-shrink: 0; 
 
    display: flex; 
 
    flex-grow: 0; 
 
    background: green; 
 
} 
 
.inner2 { 
 
    width: 258px; 
 
    flex-shrink: 0; 
 
    display: flex; 
 
    flex-grow: 0; 
 
    background: green; 
 
}

<div class="outer"> 
 
    <div class="middle"> 
 
    <div class="inner"> 
 
     hello 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="outer"> 
 
    <div class="middle"> 
 
    <div class="inner2"> 
 
     hello 
 
    </div> 
 
    </div> 
 
</div>

Here è l'esempio che illustra il problema che sto avendo. Mi aspetto che entrambe le righe abbiano lo stesso aspetto, tuttavia, quando si utilizza flex-basis (riga 1), il contenitore flessibile (elemento .middle) sembra ignorare la larghezza intrinseca del relativo elemento figlio (.inner) e prende solo il testo in considerazione.

Questa differenza può essere osservata nelle ultime versioni di Chrome, FF e Safari (ma non in IE11/Edge).

Chiarimento: Non sto chiedendo perché IE11/Edge si comporta come fa. Il suo comportamento (in questo caso) in realtà mi sembra logico. Sto chiedendo perché c'è differenza in tutti gli altri browser.

Aggiornamento: Edge 13 si comporta proprio come IE11.

Answer 1

questo sembra essere un bug. Un elemento che è sia contenitore flessibile che elemento flessibile sembra ignorare le dimensioni intrinseche dei suoi figli se vengono impostati tramite flex-basis, scegliendo invece di misurare la larghezza/altezza del contenuto dei suoi figli. È ironico che IE11/Edge sia l'unico browser a implementarlo correttamente.

Chromium bug tracker

Answer 2

Questo perché IE11 supporta la flessibilità in modo diverso (solo parzialmente supporta tecnicamente). IE 11 richiede che un'unità venga aggiunta al terzo argomento, la proprietà flex-based vede la documentazione di msdn nella sorgente sottostante.

Così le dichiarazioni di stenografia flex con valori flexless senza base vengono ignorate.

flex-base è la larghezza minima, un contenitore può avere, quindi crescerà/ridurrà in base alle altre regole. La larghezza non deve essere utilizzata contemporaneamente a flex e flex, poiché sono in conflitto con la compatibilità con X-browser.

Ho aggiornato anche la tua codepen, per aiutare a spiegare. Si prega di vedere qui: http://codepen.io/mattpark22/pen/wWqKpz

Ora si può vedere come in modo diverso i browser gestiscono flex con:

flex-basis: 258px; 
width: 258px; 

Ho anche rimosso

display: flex; 

da Outer - questo stava avendo un effetto anche.

Fonte: http://caniuse.com/#search=flex-basis

Fonte: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored

Fonte: https://msdn.microsoft.com/en-us/library/dn254946%28v=vs.85%29.aspx