L’altezza non è corretta negli elementi della flexbox in Chrome

Ho un problema delicato per qualsiasi guru CSS là fuori. Il mio div verde ha un’altezza flessibile, occupando il resto. E ora voglio mettere un div all’interno di quel div che dovrebbe essere la metà del div verde. Ma sembra che Chrome lo consideri come metà dell’intera pagina piuttosto che come elemento flessibile.

http://jsfiddle.net/unh5rw9t/1/

HTML

 
2
2.1

CSS

 html,body { height: 100%; margin: 0; } #wrapper { display: flex; flex-flow: column; height: 100%; } #menu { height: 70px; background-color: purple } #content { flex: 1; height: 100%; background-color: green; } #half_of_content { height: 50%; background-color: yellow; } #footer { height: 100px; background-color: cyan } 

Si può assolutamente posizionare div id="half_of_content" .

 #content { flex: 1; height: 100%; background-color: green; position: relative; /* new */ } #half_of_content { height: 50%; background-color: yellow; position: absolute; /* new */ width: 100%; /* new */ } 

DEMO

Per quanto riguarda la tua affermazione:

Ma sembra che Chrome lo consideri come metà dell’intera pagina piuttosto che come elemento flessibile.

Hai dato al body height: 100% . Quindi ha dato al suo bambino ( .wrapper ) height: 100% . Quindi ha dato al suo bambino ( .content ) height: 100% . Quindi sono tutti all’altezza uguale. Dare al prossimo figlio ( #half_of_content ) height: 50% sarebbe naturalmente pari al 50% dell’altezza body .

Con il posizionamento assoluto, tuttavia, non è necessario specificare le altezze padre .

@Michael_B ha spiegato perché Chrome si comporta in questo modo:

Hai dato al body height: 100% . Quindi ha dato al suo bambino ( .wrapper ) height: 100% . Quindi ha dato al suo bambino ( .content ) height: 100% . Quindi sono tutti all’altezza uguale. Dare al prossimo bambino ( #half_of_content ) height: 50% sarebbe naturalmente un 50% di altezza del body .

Tuttavia, Firefox non è d’accordo perché, in realtà, tale height: 100% di .content viene ignorato e la sua altezza viene calcasting in base a flex: 1 .

Ovvero, Chrome risolve la percentuale rispetto al valore della proprietà height genitore. Firefox lo fa rispetto all’altezza flessibile risolta del genitore.

Il comportamento corretto è quello di Firefox. Secondo Definite e Dimensioni indefinite ,

Se una percentuale verrà risolta rispetto alla dimensione principale di un elemento flessibile , e l’ elemento flessibile ha una base flessibile definita , e il contenitore flessibile ha una dimensione principale definita , la dimensione principale dell’articolo flessibile deve essere considerata come definita per lo scopo di risolvere la percentuale e la percentuale deve essere risolta rispetto alla dimensione principale flessibile dell’articolo flessibile (ovvero, dopo che l’algoritmo di layout sottostante è stato completato per il contenitore flessibile del componente flessibile e l’ articolo flessibile ha acquisito il suo valore finale). dimensione).

Ecco una soluzione alternativa per Chrome:

 #content { display: flex; flex-direction: column; } #content::after { content: ''; flex: 1; } #half_of_content { flex: 1; height: auto; } 

In questo modo lo spazio disponibile in #content verrà distribuito equamente tra #half_of_content e lo pseudo-elemento ::after .

Supponendo che #content non #half_of_content altri contenuti, #half_of_content sarà del 50% . Nel tuo esempio hai un 2 in là, quindi sarà un po ‘meno del 50% .

 html, body { height: 100%; margin: 0; } #wrapper { display: flex; flex-flow: column; height: 100%; } #menu { height: 70px; background-color: purple } #content { flex: 1; height: 100%; background-color: green; display: flex; flex-direction: column; } #content::after { content: ''; flex: 1; } #half_of_content { flex: 1; background-color: yellow; } #footer { height: 100px; background-color: cyan } 
 
2
2.1

Le cassette di sicurezza per nidificazione sono un po ‘buggate. Ho rielaborato leggermente il tuo markup aggiungendo un wrapper interno con display: flex; che sembra fare il lavoro. Ecco il violino (usando anche i nomi delle classi invece degli id).

 
2
2.1
.wrapper-inner { position: absolute; display: flex; flex-direction: column; height: 100%; width: 100%; }

Difficoltà:

su #content set

 display: flex; flex-flow: column nowrap; justify-content: flex-end 

in #half_of_content set flex: 0 0 50% ;

Avvertenza: devi aggiungere un div extra come figlio di #content .

Ecco l’esempio completo:

 html,body { height: 100%; margin: 0; } #wrapper { display: flex; flex-flow: column; height: 100%; } #menu { height: 70px; background-color: purple } #content { flex: 1; height: 100%; display:flex; flex-flow: column nowrap; justify-content: flex-end; background-color: green; } #half_of_content { flex: 0 0 50%; background-color: yellow; } #footer { height: 100px; background-color: cyan } 
  
2
2.1