Height Calculation By Browsers : Containing Blocks and Children

Question

Picked up this in SO itself - the \'height calculation\' made by browsers (when we have not explicitly set a height but we have set a min-height) f

Answer 1

The height CSS property on MDN:

Percentages

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.

In 1., the height attribute of the parent isn't explicitly specified, therefore the value computes to auto.

In 2., the height attribute is specified and therefore it's calculated with respect to the parent