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:
flex-2 ha un’altezza del 100% (il che è strano perché un object flessibile ha un 100% di default + è buggato in Chrome) 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.
position: relative; sul genitore del bambino. position: absolute; sul bambino overflow-y: auto; sul div scorrevole 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; }
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