¿Cómo puedo hacer que los niños Flexbox tengan el 100% de la altura de sus padres?

Estoy tratando de llenar el espacio vertical de un elemento flexible dentro de 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>

Y aquí está el JSFiddle

flex-2-child no llena la altura requerida, excepto en los dos casos donde:

1. flex-2 tiene una altura del 100% (lo cual es extraño porque un elemento flexible tiene un 100% por defecto + tiene errores en Chrome)
2. flex-2-child tiene una posición absoluta que también es inconveniente

Esto no funciona en Chrome o Firefox actualmente.

Utilizar align-items: stretch

Similar a la respuesta de David Storey, mi solución es:

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

Alternativamente a align-items , puede usar align-selfsolo el .flex-2-childelemento que desea estirar.

He respondido una pregunta similar aquí .

Sé que ya has dicho que position: absolute;es inconveniente, pero funciona. Consulte a continuación para obtener más información sobre cómo solucionar el problema de cambio de tamaño.

También vea este jsFiddle para una demostración, aunque solo he agregado prefijos webkit tan abiertos en Chrome.

Básicamente tiene 2 problemas que trataré por separado.

1. Hacer que el niño de un elemento flexible llene la altura al 100%
   • Establecer position: relative;en el padre del niño.
   • Establecer position: absolute;en el niño.
   • Luego puede establecer el ancho / alto según sea necesario (100% en mi muestra).
2. Arreglando el "capricho" de desplazamiento de cambio de tamaño en Chrome
   • Póngase overflow-y: auto;el div desplazable.
   • El div desplazable debe tener una altura explícita especificada. Mi muestra ya tiene una altura del 100%, pero si ya no se aplica, puede especificarheight: 0;

Consulte esta respuesta para obtener más información sobre el problema del desplazamiento.

Si entiendo correctamente, ¿quieres que flex-2-child llene la altura y el ancho de su padre, de modo que el área roja esté completamente cubierta por el verde?

Si es así, solo necesita configurar flex-2 para usar flexbox:

.flex-2 {
    display: flex;  
}

Luego dígale a flex-2-child que se vuelva flexible:

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

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

La razón es que flex-2-child no es un elemento de flexbox, pero su padre sí lo es.

Supongo que el comportamiento de Chrome es más consistente con la especificación CSS (aunque es menos intuitivo). De acuerdo con las especificaciones de Flexbox, el stretchvalor predeterminado de la align-selfpropiedad cambia solo el valor utilizado de la "propiedad de tamaño cruzado" del elemento ( heighten este caso). Y, según tengo entendido la especificación CSS2.1 , las alturas porcentuales se calculan a partir del valor especificado de los padres height, no de su valor utilizado. El valor especificado de los padres heightno se ve afectado por ninguna propiedad flex y sigue siendoauto .

Configuración explícitas height: 100%hace que sea formalmente posible calcular la altura porcentual del niño, al igual que el establecimiento height: 100%de htmlhace posible calcular la altura porcentaje de bodyen CSS2.1.

Encontré la solución por mí mismo, supongamos que tiene el CSS a continuación:

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

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

En este caso, establecer la altura al 100% no funcionará, así que lo que hago es establecer la margin-bottomregla en auto, como:

.child {
  margin-bottom: auto;
}

y el niño estará alineado con el superior del padre, también puede usar la align-selfregla de todos modos si lo prefiere.

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

Una idea sería que display:flex;con flex-direction: row;está llenando el containerdiv con .flex-1y .flex-2, pero eso no significa que .flex-2tenga un valor predeterminado, height:100%;incluso si se extiende a toda su altura y para tener un elemento hijo ( .flex-2-child) con el height:100%;que deberá establecer el padre height:100%;o usar display:flex;con flex-direction: row;en el .flex-2div también.

Por lo que sé display:flex, no se extenderá la altura de todos los elementos secundarios al 100%.

Una pequeña demostración, eliminó la altura .flex-2-childy se usó display:flex;en .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/

Esto también se puede resolver con align-self: stretch;el elemento que queremos estirar.

A veces es deseable estirar solo un elemento en una configuración de 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>

.envase { . . . . elementos de alineación: estiramiento; . . . . }

Esta es mi solución usando css +

En primer lugar, si el primer hijo (flex-1) debería ser 100 px, no debería ser flex. En css +, de hecho, puede configurar elementos flexibles y / o estáticos (columnas o filas) y su ejemplo se vuelve tan fácil como esto:

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

contenedor css:

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

y obviamente incluye css + 0.2 core

escuchar el violín