Come rendere i bambini flexbox alti al 100% dei loro genitori?

Sto cercando di riempire lo spazio verticale di un object flessibile all’interno di un flexbox.

.container { height: 200px; width: 500px; display: -moz-box; display: -webkit-flexbox; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .flex-1 { width: 100px; background-color: blue; } .flex-2 { position: relative; -moz-box-flex: 1; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; background-color: red; } .flex-2-child { height: 100%; width: 100%; background-color: green; } 
 

Ed ecco il JSFiddle

flex-2-child non riempie l’altezza richiesta tranne nei due casi in cui:

  1. flex-2 ha un’altezza del 100% (il che è strano perché un object flessibile ha un 100% di default + è buggato in Chrome)
  2. flex-2-child ha una posizione assoluta che è anche scomoda

Al momento non funziona in Chrome o Firefox.

Ho risposto a una domanda simile qui .

So che hai già detto la position: absolute; è scomodo ma funziona. Vedi sotto per ulteriori informazioni sulla risoluzione del problema di ridimensionamento.

Vedi anche questo jsFiddle per una demo, anche se ho aggiunto solo i prefissi webkit così aperti in Chrome.

Fondamentalmente hai 2 problemi che tratteremo separatamente.

  1. Ottenere il figlio di un object flessibile per riempire l’altezza del 100%
    • Imposta position: relative; sul genitore del bambino.
    • Imposta position: absolute; sul bambino
    • È quindi ansible impostare larghezza / altezza come richiesto (100% nel mio campione).
  2. Risolvendo lo scrolling “ridimensionamento” di ridimensionamento in Chrome
    • Inserisci overflow-y: auto; sul div scorrevole
    • Il div scorrevole deve avere un’altezza esplicita specificata. Il mio campione ha già altezza 100%, ma se nessuno è già applicato puoi specificare height: 0;

Vedere questa risposta per ulteriori informazioni sul problema di scorrimento.

Se ho capito bene, vuoi che flex-2-child riempia l’altezza e la larghezza del suo genitore, in modo che l’area rossa sia completamente coperta dal verde?

Se è così, devi solo impostare flex-2 per usare flexbox:

 .flex-2 { display: flex; } 

Dì allora a flex-2-child di diventare flessibile:

 .flex-2-child { flex: 1; } 

Vedi http://jsfiddle.net/2ZDuE/10/

Il motivo è che flex-2-child non è un articolo flexbox, ma è il suo genitore.

Simile alla risposta di David Storey, il mio lavoro è:

 .flex-2 { align-items: stretch; display: flex; } 

In alternativa agli align-items di align-items , puoi usare align-self solo sull’elemento .flex-2-child che desideri allungare.

Suppongo che il comportamento di Chrome sia più coerente con le specifiche CSS (anche se è meno intuitivo). Secondo la specifica di Flexbox, il valore di stretch predefinito della proprietà align-self modifica solo il valore utilizzato della “proprietà cross size” dell’elemento ( height , in questo caso). E, come comprendo le specifiche CSS2.1 , le altezze percentuali sono calcolate dal valore specificato height del genitore, non il suo valore usato. Il valore specificato height del genitore non è influenzato da alcuna proprietà flex ed è ancora auto .

Impostazione height: 100% esplicita height: 100% rende formalmente ansible calcolare l’altezza percentuale del bambino, proprio come l’ height: 100% impostazione height: 100% a html è ansible calcolare l’altezza percentuale del body nei CSS2.1.

html

 

css

 .container { height: 200px; width: 500px; display: -moz-box; display: -webkit-flexbox; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .flex-1 { flex:1 0 100px; background-color: blue; } .flex-2 { -moz-box-flex: 1; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1 0 100%; background-color: red; } .flex-2-child { flex: 1 0 100%; height:100%; background-color: green; } 

http://jsfiddle.net/2ZDuE/750/

Un’idea sarebbe quella display:flex; con flex-direction: row; sta riempiendo il container div con .flex-1 e .flex-2 , ma ciò non significa che .flex-2 abbia height:100%; predefinita height:100%; anche se è esteso a tutta altezza e avere un elemento figlio ( .flex-2-child ) con height:100%; dovrai impostare l’ height:100%; del genitore height:100%; o utilizzare display:flex; con flex-direction: row; anche sul .flex-2 div.

Da quello che so display:flex non estenderà l’altezza degli elementi del tuo bambino al 100%.

Una piccola demo, rimossa l’altezza da .flex-2-child e display:flex; usato display:flex; su .flex-2 : http://jsfiddle.net/2ZDuE/3/

Ho trovato la soluzione da solo, supponiamo di avere il CSS qui sotto:

 .parent { align-items: center; display: flex; justify-content: center; } .child { height: 100%; <- didn't work } 

In questo caso, impostare l'altezza al 100% non funzionerà, quindi quello che faccio è impostare la regola margin-bottom su auto , come:

 .child { margin-bottom: auto; } 

e il bambino sarà allineato al più alto del genitore, se lo preferisci puoi comunque usare la regola align-self .

 .child { align-self: flex-start; } 

Questa è la mia soluzione usando css +

Prima di tutto se il primo figlio (flex-1) dovrebbe essere 100px non dovrebbe essere flessibile. In css + infatti puoi impostare elementi flessibili e / o statici (colonne o righe) e il tuo esempio diventa facile come questo:

 
100px
flex

contenitore css:

 .container { height: 200px; width: 500px; position:relative; } 

e ovviamente include css + 0.2 core

ascolta il violino