Why do height and min-height affect the child container differently?

Question

In my css, I have the height of the parent set to 75px, and the height of the child set to 100%, and it displays correctly. However, when I change the parent's height attribute to a min-height of 75px instead, the child shrinks to the height of the text it contains, but the parent's height stays 75px. Why doesn't the child stay 75px?

#parent{
    height:75px;
    background-color:navy;
    clear:left;
    }
#child{
    width:300px;
    height:100%;
    background-color:aqua;
    float:left;
    }

Here, the child is 75px like it is supposed to be.

#parent{
    min-height:75px;
    background-color:navy;
    clear:left;
}
#child{
    width:300px;
    height:100%;
    background-color:aqua;
    float:left;
    }

The child is only 21px high now.

in order to use a percentage height, the child's parent element must be concretely defined (e.g., a px value) -- min-height doesn't count. — mpen, Aug 17 '12 at 23:49

score 2 · Accepted Answer · edited May 23 '17 at 11:48

2

I believe this has been a longstanding bug (or 'feature') in CSS. See https://stackoverflow.com/a/3808701/1608085

In short, you can use

min-height: inherit;

in the child to correctly inherit the min-height property from the parent.

edited May 23 '17 at 11:48

Community

1
1

answered Aug 17 '12 at 23:47

smang

1,187
10
23

I hadn't considered that work-around; nicely done! And welcome to Stack Overflow! =) – David Thomas Aug 17 '12 at 23:48
Thanks, that was exactly the problem. – Adam11 Aug 17 '12 at 23:54

Why do height and min-height affect the child container differently?

1 Answers1