Make child div take max height

Question

I'm trying to make the .box-content div take the max height there is left inside boxA/boxB div. I got a div .box-header and a .box-content inside boxA/boxB div. The .box-content is sharing a div with the .box-header.

In this JSFiddle you can see that the .box-content is going outside it's parent div.

How can I solve this with pure CSS taking in account with these 2 rules:

1. The height of the .box-content is stretchable (grow/shrink whenever window size changes);
2. The .box-content has a minimum height of 200px;

Answer 1

if overflow is an option (which i feel makes your life easy here), here is a demo

Keeping HTML same, your css (2 line changes) below

.boxA {
    width: 220px;
    padding: 0px 3px 5px 5px;
    float: left;
    height: 100%;
    margin-bottom: 0px;
    border: solid 1px green;
    overflow:hidden; /*added this*/
}

.boxB {
    width: 420px;
    padding: 0px 5px 5px 3px;
    float: right;
    height: 100%;
    border: solid 1px red;
    overflow:hidden;/*added this*/
}

Answer 2

The problem you are facing is :

.box-content is set to 100% of it's parent but there is also the .box-header that is inside the parent so .box-content is pushed down and has to overflow (the size of .box-content) to keep 100% height of it's parent.

I can suggest this css :

.box-content { height: 90%; }

.box-header {
    position: relative;
    background-color: green;
    padding:11px 8px 5px;
    color: white;
    height:10%;
}

See this FIDDLE

Answer 3

You could set the parent divs to be scrollable in the event that the child div has a bigger height.

.boxA{ overflow:auto; } .boxB{ overflow:auto; }