Why do min/max width/height values don't allow the element to fill out its parent div?

Question

HTML:

<div class="content">
    <div class="card">
    </div>
</div>

CSS:

.content {
    min-height: 350px;
    min-width: 320px;
    max-width: 350px;
    padding: 15px;
}

.card {
    width: 100%;
    height: 100%;
    background-color: black;
}

http://jsfiddle.net/aJhEF/1/

When examined with console, it shows that .content has functioning width and height. Then why does the child element, with its width and height being set to 100% not fill out its parent's width and height?

You need to give it an explicit width/height, rather than only minimum and maximum values. — CodingIntrigue, Aug 01 '13 at 12:26

score 4 · Accepted Answer · answered Aug 01 '13 at 12:27

4

Child elements don't inherit their parents min-height property

This is why the .card element has a height of 0

As far as width is concerned, .card does fill out it's parent's width.

answered Aug 01 '13 at 12:27

Danield

121,619
37
226
255

This seems like strange behaviour. Do you know why they don't inherit min-height property? – styke Aug 01 '13 at 12:30
It does not fill out it's parent as long as the padding is there. Padding is extra space on the INSIDE of the parent element, therefore this extra space is non-filled space of the parent element. – Parrotmaster Aug 01 '13 at 12:32
1

@styke After some googling I found [this post](http://stackoverflow.com/a/3808701/703717) - :) – Danield Aug 01 '13 at 12:37
@Danield thanks Daniel, the post you found contains a workaround too. Take care. – styke Aug 01 '13 at 12:39

score 1 · Answer 2 · answered Aug 01 '13 at 12:40

Danield is right.

You might solve this by using relative and absolute positions, combined with a negative margin (to compensate the padding):

.content {
    min-height: 350px;
    min-width: 320px;
    max-width: 350px;
    padding: 15px;
    position: relative;
}

.card {
    width: 100%;
    height: 100%;
    background-color: black;
    position: absolute;
    margin: -15px;
}

Parrotmaster · Answer 3 · 2013-08-01T12:36:08.337

Because you gave the parent a set padding. Remove padding: 15px; to fill out the div.

padding is extra space at the inside of the elements borders. If you want space around the outside, use margin.

You stated that you wanted your child to fill out the parent element, and since padding it is extra space on the inside of the parent element, the child will not fill out it's parent as long as the padding is there.

Edit: The reason you don't see the results you wanted is because you have your element a min-height and min-width instead of actual sizes. You need to give this element set size (be it pixels or %). This is due to the fact that your child element doesn't inherit the min and max width/height of it's parent.

See JSFiddle

I've noticed if you remove the `min` prefixes, it fills it out, sans padding. — , Aug 01 '13 at 12:26

Why do min/max width/height values don't allow the element to fill out its parent div?

3 Answers3