[jkcxn]

He says "width looks up the tree while height looks down the tree."

And "Width Looks Outward, Height Looks Inward"

And - 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.”

But this is wrong and 100% does mean as tall as the things I am inside of. And this is the same as how width works.

The spec even says "Percentages specify sizing of a box with respect to the box’s containing block."

Here's a quick example

https://jsfiddle.net/znqtue21/

There is a quirk where a box's size is a percentage of the parent block, but the parent block's size is calculated from its child (there would be a circular dependency), in which case there are special rules. But even these are the same for width and height. Usually you can just put an explicit height on the parent. https://drafts.csswg.org/css-sizing/#cyclic-percentage-contr...

[codethief]

Exactly, this was pointed out in some other comments further down the thread, too.

I'm surprised how one can get something like this so wrong and, at the same time, claim that CSS is logical (and, supposedly, claim to understand that logic).

[magpi3]

But what about if the "parent" is the body tag?

https://jsfiddle.net/6fmu2z8s/

[jkcxn]

It's no different except now you've set parent's height to 100% of its parent, which is the html tag. But the html tag is height: auto so there is a circular dependency. if you put html { height: 100% }, or set parent's height to an explicit height then its fine

This is the reason for the perceived difference between width and height. The rules are the same but the box's default width and height are different

[pcthrowaway]

Interestingly, the body's box there is only expanding to fit its content, but the body's background-color is applied to the entire document