Usually, If 'height' Property Is Not Used in the Parent Element, Percentage Considers the Height as 0.


1 min read


It is quite confusing because elements can get height that is larger than 0 by many ways. Let me show you the ways.

If There Is Text

In 'display:flex', If Another Item Has the Property Where the Value Is In <length> Data Type

<length> data type is types like 'px' or 'em'.

!Exception! In 'display:flex', If the Item Does Not Have the Property

If the item doesn't have 'height' property, the height becomes 100% of the container's height. And the item's height is a real value that its child can use by percentage.