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

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