It's not true. It's also a dangerous rule of thumb. Percentage widths and heights refer to _containing_ blocks, not contents. However, if you size a box as some percentage of a block, and that block in turn has a size that depends on its contents, you can get a cyclical depedency. In that case, there _are_ rules on how that's resolved, but typically it's almost as if you hadn't written the percentage rule at all; i.e. this very rarely does what you want. And as it happens, if you're just in normal flow, then of course the height of any container depends on what's in it, so percentage heights with respect to such a container don't work.

The exact cyclical-dependency-breaking-algorithm is more complex: https://www.w3.org/TR/css-sizing-3/#cyclic-percentage-contri...

You should only use percentage sizes with respect to containers that have a definite, non-content-dependent size. As it so happens that's the _default_ for width, but not for height, but you could easily have the reverse situation if you're shrinking width to fit and sizing height explicitly.

So the problems people encounter are really simple and the need for the CSS exception here pretty intuitive. I'm pretty sure people get caught out by this largely because there's no good feedback loop here; it's not like the browser devtools warn you when you've made a cyclical dependency: it just doesn't quite do what you want and worst of all: sometimes that still sort of looks "ok" so you don't notice what's wrong right away. There may be some good reason why devtools can't warn you about this, but that's the real problem here, not CSS illogicality.

So the rule of thumb: don't rely on cyclical dependencies; i.e. don't define width or height with respect to a container that itself has a width or respectively height that depends on its content.