Usually, If 'height' Property Is Not Used in the Parent Element, Percentage Considers the Height as 0.
Introduction
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.