Altezza 100% sul bambino della colonna flexbox

Sto avendo problemi con una colonna flexbox in quanto i bambini dell’elemento flex’d non rispondono height in percentuale. L’ho verificato solo in Chrome e da quello che ho capito è un problema di Chrome. Ecco il mio esempio:

HTML

 

CSS

 .flexbox{ position:absolute; background:black; width:100%; height:100%; display: flex; flex-direction:column; } .flex{ background:blue; flex:1; } .flex-child{ background:red; height:100%; width:100%; display:block; } .static{ background:green; width:100%; height:5rem; } 

Ecco il CodePen.

Lo voglio in modo che il .flex-child rosso .flex-child riempia il blu .flex . Perché non l’ height:100% funziona?

TL; DR: .flex per display:flex e elimina l’ height:100% su .flex-child . Puoi vedere il CodePen modificato qui.

Perché funziona:

Ho imparato da questa domanda simile che, secondo le specifiche di flexbox, un align-self:stretch valore di align-self:stretch (il valore predefinito per un elemento flex’d) cambia solo il valore utilizzato della proprietà di dimensione incrociata di un elemento (in questo caso, height ) . Tuttavia, le percentuali vengono calcolate dal valore specificato della proprietà cross-size del genitore, non dal valore utilizzato. Se mai apri il tuo Inspector e vedi height:100% sotto ‘Stili’ ma height:1200px sotto ‘Calcolato’, quindi questo ti mostra rispettivamente i valori specificati e usati .

Sembra che Chrome segua le specifiche per il tee in questo senso. Ciò significa che l’ height:100% impostazione height:100% su .flex-child significa il 100% height specificata di .flex . Poiché non abbiamo specificato height su .flex , ciò significa che stiamo prendendo il 100% height predefinita, che è auto . Scopri perché il motore di layout si confonde?

Impostazione di .flex per display:flex e rimozione height:100% da .flex-child (in modo che non tenti di impostare il 100% di auto ) renderà .flex-child riempire tutto .flex

Quando questo non funzionerà:

Questo non funzionerà se stai cercando di riempire solo alcuni di .flex , ex. cercando di impostare .flex-child in height:90% , perché flettere il bambino significa che riempirà tutto lo spazio disponibile. Ho pensato che potresti essere in grado di hackerarlo con il posizionamento assoluto, ma non sembra funzionare. Puoi hackerare aggiungendo un secondo figlio a .flex che chiameremo .spacer , e impostando .spacer a flex:1 e .flex-child a flex:9 (assicurati di impostare flex-direction:column su .flex ). Un hack, ma l’unico modo per sistemarlo. Ecco il CodePen.

Speriamo di non dover continuare a fare affidamento su questo e cambieranno le specifiche per comportarci meglio come previsto.