Come posso rendere Flexbox i bambini al 100% di altezza dei loro genitori?

Sto cercando di riempire lo spazio verticale di un oggetto flessibile all'interno di un Flexbox.

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

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

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 articolo flessibile ha un 100% di default + è buggy in Chrome)
2. flex-2-child ha una posizione assoluta che è anche scomoda

Questo non funziona attualmente in Chrome o Firefox.

Uso align-items: stretch

Simile alla risposta di David Storey, la mia soluzione è:

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

In alternativa align-items, puoi usare align-selfsolo l' .flex-2-childoggetto che vuoi allungare.

Ho risposto a una domanda simile qui .

So che hai già detto che 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 tratterò separatamente.

1. Far riempire il bambino di un oggetto flessibile al 100% di altezza
   • Impostato position: relative;sul genitore del bambino.
   • Impostare position: absolute;sul bambino.
   • È quindi possibile impostare larghezza / altezza come richiesto (100% nel mio campione).
2. Risolto il problema del ridimensionamento "stranezza" in Chrome
   • Indossa overflow-y: auto;il div scorrevole.
   • Il div scorrevole deve avere un'altezza esplicita specificata. Il mio campione ha già un'altezza del 100% ma se non ne è già stato applicato nessuno, è possibile specificareheight: 0;

Vedi 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?

In tal caso, devi solo impostare flex-2 per usare flexbox:

.flex-2 {
    display: flex;  
}

Quindi dì 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 oggetto flexbox, ma lo è il suo genitore.

Suppongo che il comportamento di Chrome sia più coerente con le specifiche CSS (anche se è meno intuitivo). Secondo le specifiche Flexbox, il stretchvalore predefinito della align-selfproprietà cambia solo il valore utilizzato della "proprietà di dimensione incrociata" dell'elemento ( height, in questo caso). E, come ho capito le specifiche CSS2.1 , le altezze percentuali sono calcolate dal valore specificato del genitore height, non dal suo valore usato. Il valore specificato del genitore heightnon è influenzato da alcuna proprietà flessibile ed è ancora auto.

L'impostazione esplicita height: 100%rende formalmente possibile calcolare l'altezza percentuale del figlio, proprio come l'impostazione height: 100%per htmlconsentire di calcolare l'altezza percentuale di bodyin CSS2.1.

Ho trovato la soluzione da solo, supponiamo che tu abbia il CSS qui sotto:

.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  height: 100%; <- didn't work
}

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

.child {
  margin-bottom: auto;
}

e il bambino sarà allineato alla parte superiore del genitore, puoi anche usare la align-selfregola se preferisci.

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

Un'idea sarebbe che display:flex;con flex-direction: row;sta riempiendo il containerdiv con .flex-1e .flex-2, ma ciò non significa che .flex-2abbia un valore predefinito height:100%;anche se è esteso a tutta altezza e per avere un elemento figlio ( .flex-2-child) con height:100%;dovrai impostare il genitore height:100%;o usare display:flex;anche con flex-direction: row;il .flex-2div.

Da quello che so display:flexnon estenderemo l'altezza di tutti gli elementi di tuo figlio al 100%.

Una piccola demo, rimossa l'altezza da .flex-2-childe utilizzata display:flex;su .flex-2: http://jsfiddle.net/2ZDuE/3/

html

<div class="container">
    <div class="flex-1"></div>
    <div class="flex-2">
        <div class="flex-2-child"></div>
    </div>
</div>

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/

Questo può essere risolto anche con align-self: stretch;l'elemento che vogliamo allungare.

A volte è desiderabile allungare solo un elemento in una configurazione di flexbox.

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  align-self: stretch;
  background-color: red;
}
.flex-2-child {
  background-color: green;
}

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

.container {. . . . align-items: tratto; . . . . }

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:

<div class="container">
  <div class="EXTENDER">
    <div class="COLS">
      <div class="CELL _100px" style="background-color:blue">100px</div>
      <div class="CELL _FLEX" style="background-color:red">flex</div>
    </div>
  </div>
</div>

contenitore css:

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

e ovviamente includono css + 0,2 core

senti il violino