How to make an element stretch to the same height as its container?

Question

How to make a div overflow when it is larger than its container when height cannot be specified?

Prerequisites:

• .Wrap is variable in height and cannot have a set height.
• .Head should be a fixed height.
• .Body should become sccrollable when it is larger in height than its container (.Wrap)

The plan here is to make .Body stretch to fit .Wrap causing overflow to trigger.

CURRENT CSS

.Wrap{
    position:fixed;
    top:10%;
    left:10%;
    display:flex wrap;
    align-items:stretch;
    max-height:50%;
    max-width:50%;
    overflow:hidden;
}
.Head{
    height:50px;
    width:100%;
}
.Body{
    overflow:auto;
}

http://jsfiddle.net/x6TaR/2

Answer 1

You can try specifying a min-height for .Head (to prevent flexbox from forcibly collapsing it), and set the flex-flow property of the parent .Wrap element to column nowrap:

.Wrap{
    position:fixed;
    top:10%;
    left:10%;
    display:flex;
    flex-flow: column nowrap;
    align-items:stretch;
    background:#ddd;
    max-height:50%;
    max-width:50%;
    padding:10px;
    overflow:hidden;
}
.Head{
    background:#e00;
    height:50px;
    min-height: 50px;
    width:100%;
}

http://jsfiddle.net/x6TaR/6/

Answer 2

The body should have a definite height. Check this fiddle.

.Body{
    background:#555;
    overflow:auto;
    height: 150px;
}