The Height Enigma

May 16, 2025

CSS
layout

Screenshot of a code editor labeled “Code Playground” showing HTML and CSS on the left and a rendered result on the right. The CSS styles a <p> element with a tomato background and height: 50%. The result displays a red box containing the text “Hello world!” with partial vertical height, indicating height: 50% is relative to an undefined parent height.

I’ve given this paragraph height: 50%, but as you can see, it hasn’t grown at all! In fact, it doesn’t matter whether I set height: 100% or height: 10000% or height: 0%. Nothing happens.

In my first few years with CSS, I developed a bit of an intuition for when it would work and when it wouldn’t, but it always sorta felt like rolling the dice. Sometimes it wouldn’t work even when it really seemed like it should!

Like with so much in CSS, it feels random until you learn about the underlying mechanisms that explain the behaviour, and then it all makes perfect sense. In this blog post, we’ll learn what’s going on here and I’ll share how I solve these sorts of problems.

Source: The Height Enigma • Josh W. Comeau

The height property has from the earliest days of CSS been one of the more flat out counter-intuitive aspects of CSS. Here Josh Comeau explains its arcane workings.

Related videos