Understanding Height
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.
Ever had a percentage-based height that fails?
Let’s explore an example where my height rule is playing hard to get.
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.
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.
