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