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

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