Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialJaime Gonzalez
5,186 PointsWhy 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.
chrisverra
3,760 Pointsit probably gets overwritten somewhere else. try using 5% !important; or just find out where it is overwritten
2 Answers
Eduardo Mejía
36,816 PointsHola 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
5,186 PointsEntendido, 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
5,186 PointsYes, of course, here is the code. Already checked for overwritting issues.
Thx.
Gianmarco Mazzoran
22,076 PointsGianmarco Mazzoran
22,076 PointsHi, could you post your code?