CSS CSS Flexbox Layout Flexbox Properties Wrapping Flex Items

Jaime Gonzalez
Jaime Gonzalez
5,174 Points

Why percentage units doesn't work when setting flex-container height?

Hi,

when setting a flex-container width in % units it works great, first it takes the % specified and shrinks or grows upon resizing the browser.

But when setting the flex-container height in % units it does nothing. !o_O? Only works in you set a fixed (px) size like Guil did on the video.

Anyone knows why?

Thx.

it probably gets overwritten somewhere else. try using 5% !important; or just find out where it is overwritten

2 Answers

Hola Jaime. Tengo una idea del por qué no funcionará pero no creo poder explicarla en inglés, veo que en tu perfil tienes puesto que hablas español, así que escribiré mi respuesta en español :).

Cuando haces una página, el alto de ella irá creciendo conforme agregas elementos en el body, como solo hay un div con la clase container, éste hará que se expanda el body, por lo tanto, el container siempre ocupará el 100% del alto del body, es por eso que no importa que porcentaje le pongas al container como es una unidad relativa no le afecta al ser el único elemento.

Si quieres ver el alto del container reflejado debes agregar unos estilos como estos:

html, body {
    height: 100%;
}

.container {
    height: 100%;/*O cualquier otro porcentaje que quieras*/
}

Poniendo la propiedad height del html en 100% hacemos que agarre el tamaño del viewport del navegador, ahora el elemento que está dentro que es el body también queremos que ocupe el 100% de su contenedor que es el html. Por último queda el div container que ahora si podrá agarrar un porcentaje del alto de su elemento contenedor (body). Espero haberme explicado bien.

Saludos.

Jaime Gonzalez
Jaime Gonzalez
5,174 Points

Entendido, el caso es que no funciona en codepen.io (ni poniéndolo en el body ni metiendo el div dentro de otro div) no se porque, pero en el editor local va perfecto.

Muchas gracias Eduardo.

Jaime Gonzalez
Jaime Gonzalez
5,174 Points

Yes, of course, here is the code. Already checked for overwritting issues.

Thx.