Make child div take max height

css, height, html, stretch

Solution

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*/
}

Problem

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: - The height of the `.box-content` is stretchable (grow/shrink whenever window size changes); - The `.box-content` has a minimum height of 200px;

Original source