Altezza in percentuale non funzionante nel layout di una casella flessibile nidificata in Chrome

Ho un layout seguente completamente funzionante in Firefox e IE: Firefox

Sfortunatamente è abbastanza rotto in Chrome, vale a dire il contenitore blu scuro è collassato anche se ha altezza 100% del suo genitore: Cromo

Ho provato questo approccio , ma senza fortuna. Qualche idea su come risolvere questo problema su Chrome senza romperlo in altri browser?

html, body { height: 97%; margin: 0; padding: 0; } div { border: 10px dotted teal; } .container { display: flex; border-color: tomato; height: 100%; } .row { flex-flow: row; } .column { flex-flow: column; } .item1 { flex: 1; } .item2 { flex: 2; } .item3 { flex: 3; } .c1 { border-color: gold; } .c2 { border-color: darkblue; } 
 

La domanda dice:

Ho un layout seguente completamente funzionante in Firefox e IE. Purtroppo è rotto in Chrome, vale a dire il contenitore blu scuro è collassato anche se ha altezza 100% del suo genitore.

In realtà, si potrebbe sostenere che è vero il contrario: Chrome ha ragione, mentre Firefox e IE sono “guasti”.

Innanzitutto, ecco la soluzione:

 .item3 { height: 100%; } 

Ora esaminiamo la struttura del documento e le altezze applicate:

     
... ... ...

Secondo la specifica CSS , quando si usano le percentuali per impostare l’ height di un elemento (come si sta facendo con .container ), anche l’elemento genitore deve avere un’altezza esplicita. In riferimento al div collassato, il suo genitore ( .item3 ) non ha un’altezza definita.

Dalla specifica :


La percentuale viene calcasting rispetto all’altezza del blocco contenitore della casella generata. Se l’altezza del blocco contenitore non è specificata esplicitamente (cioè dipende dall’altezza del contenuto), e questo elemento non è posizionato in modo assoluto, il valore calcola su ‘auto’.

auto
L’altezza dipende dai valori di altre proprietà.

In termini di proprietà height , da questo esempio sembrerebbe che Chrome definisca “contain block” come “parent”, mentre Firefox e IE definiscono “contain block” come “ancestor”, oppure rispettano le altezze flex come riferimento per altezze percentuali .

Quindi, poiché il div con il bordo blu scuro ( .container column c2 ) non ha contenuto e il suo genitore non ha un’altezza specificata, quindi non c’è altezza e la scatola crolla in Chrome.

Tuttavia, specificando un’altezza per .item3 , che è il genitore della scatola compressa, l’altezza funziona su tutti i browser.

DEMO


AGGIORNARE

Più dettagli:

  • Ottimizza il rendering in modo diverso in Chrome e Firefox