Understanding Height

Johnson Kow
2 min readDec 2, 2023

--

In my journey through frontend development, one thing that used to puzzle me in the beginning was the height rule. If you’ve got a good grip on handling width confidently, you might think height plays by similar rules — and it does, to some extent.

Let’s break it down. With a block element, setting the width to a percentage means it occupies X% of the total width available. Height behaves similarly, but there's a catch, and we'll circle back to that.

There’s a huge difference in their default values although they look the same. Width defaults to ‘auto’ — growing as much as possible to fit the container. On the flip side, height defaults to ‘auto’ — aiming to be as small as possible while still accommodating all its children. I know, confusing.

This is why in my example below, the width of my block level element takes up the entire space even though I didn’t explicitly tell it to. This makes it super easy to deduce that I can use width: 50% without having to first set a width rule to the parent first. So we expect the same thing for the height right? Well not according to the default value.

Default Width on Block Level Element

Ever had a percentage-based height that fails?

Let’s explore an example where my height rule is playing hard to get.

Why isn’t my height working!!!

Setting the minHeight here is getting ignored and essentially working as ‘auto’. Remember that the parent container needs to have a height and since it doesn't, it uses default rules. So what we’ll do is we’ll set height rules to all the parent level elements.

Understanding percentage based heights

So if you ever ask yourself why setting a percent based rules to your width works every time while it doesn’t for height just remember that by default, the width will take up the entire horizontal space so it doesn’t need an explicit rule on it’s parents. However, the height rule always wants to be small so setting the height rule on the parent will help with relative sizing.

--

--

Johnson Kow

Software Engineer based out of NYC. Learning more about programming everyday 👍