THE HEIGHT ENIGMA IN CSS
Percentage-based heights in CSS can be confusing and often don't work as expected. The core issue is a circular dependency: a child element trying to define its height based on its parent's height, while the parent's height depends on its children. To resolve this, the parent element either needs an explicit, "knowable" height set using units like `rem` or pixels, or the height of the root HTML element must be set to 100% of the viewport.