css - bootstrap - flexbox grid

Hacen flexbox niños 100% altura de sus padres.

Question

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

Answer 1

Encontré la solución por mi cuenta, supongo 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 del 100% no funcionará, por lo que lo que hago es configurar la regla de margin-bottom en auto , como:

.child {
margin-bottom: auto;
}

y el niño se alineará con la parte superior del padre, también puede usar la regla align-self si lo prefiere.

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

Answer 2

Esta es mi solución usando css +

En primer lugar, si el primer hijo (flex-1) debe ser 100px, no debe ser flex. De hecho, en css + puede establecer elementos flexibles y / o estáticos (columnas o filas) y su ejemplo será 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 incluyen css + 0.2 core

escuchar el fiddle

Answer 3

He respondido una pregunta similar here .

Sé que ya has dicho 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 ver una demostración, aunque solo he agregado prefijos de webkit, así que abra en Chrome.

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

1. Conseguir 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 cambio de tamaño "peculiar" en Chrome
   • Poner overflow-y: auto; en el div desplazable
   • El div desplazable debe tener una altura explícita especificada. Mi muestra ya tiene una altura del 100%, pero si no se aplica ninguna, puede especificar la height: 0;

Consulte esta answer para obtener más información sobre el problema de desplazamiento.

Answer 4

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

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

.flex-2 {
display: flex;
}

Entonces dile 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 elemento principal es.

Answer 5

Similar a la respuesta de David Storey, mi trabajo alrededor es:

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

Como alternativa a la align-items , puede usar align-self solo en el elemento .flex-2-child que desea estirar.

Answer 6

Supongo que el comportamiento de Chrome es más consistente con la especificación de CSS (aunque es menos intuitivo). De acuerdo con la especificación de Flexbox, el valor de stretch predeterminado de align-self propiedad align-self cambia solo el valor usado de la "propiedad de tamaño cruzado" del elemento ( height , en este caso). Y, según entiendo la especificación CSS2.1 , las alturas porcentuales se calculan a partir del valor especificado de la height del padre, no de su valor utilizado. El valor especificado de la height del padre no se ve afectado por ninguna de las propiedades de flexión y sigue siendo auto .

Configuración de la height: 100% explícita height: 100% hace posible formalmente calcular el porcentaje de altura del niño, al igual que la configuración de la height: 100% a html permite calcular la altura del porcentaje de body en CSS2.1.

Answer 7

Una idea sería esa display:flex; con flex-direction: row; está llenando el div container con .flex-1 y .flex-2 , pero eso no significa que .flex-2 tenga una height:100%; predeterminada height:100%; incluso si se extiende a la altura máxima y tiene un elemento hijo ( .flex-2-child ) con height:100%; tendrás que configurar el padre a la height:100%; o utilizar display:flex; con flex-direction: row; en el .flex-2 div también.

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

Una pequeña demostración, eliminó la altura de .flex-2-child y usó la display:flex; en .flex-2 : http://jsfiddle.net/2ZDuE/3/

Answer 8

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/