Width Looks Outward, Height Looks Inward

The key insight here is: height: 100% means “I am as tall as all the things inside of me”, not “as tall as all the things I am inside of.”

That is why width: 100% does what a lot of people naturally expect and it goes the full width of the screen when working with block-level elements. They naturally take up 100% of the space. But try it on an inline element and it will remain only as wide as the content that it contains, as in 100% of the natural width. In other words, width looks to its parent for how much available space is available, which looks to its parent for how much available space it has available, and so on. It’s what is outside the element that determines the available width.

And that’s why height: 100% doesn’t do what people often expect and go the full height of the screen. Neither block or inline elements are 100% height by default, but the height of the content they contain. So, height looks inside the element at it content to determine how tall it ought to be.

For width, you look outside the tree. For height, you look inside the tree.

Thanks to Josh Comreau for the succint explanation! This is the sort of thing I’ve know in my own head but could not have articulated as nicely.

And thanks to Jim Neilsen for plucking that insight from Josh’s presentation!