Aumentar tamaño caja flex

[madman_18]

Hola!

Estoy haciendo una estructura de un bloque usando display:flex pero no consigo aumentar el tamaño de las cajas que tengo dentro de dicho div.

Mi estructura es:

Código HTML:

<div class="cajaFlex"
<div class="cajaHija"></div>
<div class="cajaHija"></div>
</div>
 

Mi CSS es este:

Código CSS:

.cajaFlex{
display:flex;
}
.cajaHija{
flex:0 1 auto;
}
 

El problema es que cuando es responsive, le añado a .cajaFlex el flex-direction:column pero no consigo que las cajas hijas me ocupen el 100% no se por qué (he probado con flex:0 1 100% y demás posibilidades pero nada).

¿Hay forma de hacerlo? Gracias!

[Triby]

No has probado con solo flex: 1; ?
https://www.w3schools.com/cssref/css3_pr_flex.asp

[flashmax]

Iniciado por madman_18

Hola!

Estoy haciendo una estructura de un bloque usando display:flex pero no consigo aumentar el tamaño de las cajas que tengo dentro de dicho div.

Mi estructura es:

Código HTML:

<div class="cajaFlex"
<div class="cajaHija"></div>
<div class="cajaHija"></div>
</div>
 

Mi CSS es este:

Código CSS:

.cajaFlex{
display:flex;
}
.cajaHija{
flex:0 1 auto;
}
 

El problema es que cuando es responsive, le añado a .cajaFlex el flex-direction:column pero no consigo que las cajas hijas me ocupen el 100% no se por qué (he probado con flex:0 1 100% y demás posibilidades pero nada).

¿Hay forma de hacerlo? Gracias!

haber si asi se corrige

Código CSS:

.cajaFlex{
display:flex;
flex-grow: 0; 
}
.cajaHija{
flex:1 1 auto;
}
 

Ojo con la compatibilidad en navegadores viejos....

[Tedel]

No ocupan el 100% del espacio porque la caja madre no tiene una medida de ancho establecida. Eso quiere decir que el navegador les asigna el ancho mínimo necesario nada más. Dale a la caja madre un ancho de 100% y las hijas seguirán su ejemplo.