Two DIVs inside DIV. How to auto-fill the space of parent DIV by second DIV?

Question

Please visit this fiddle to see what I mean -

I have a parent DIV, within that there are two DIVs placed in vertical order. The top DIV should have only the height of its content, whereas the bottom DIV should occupy all remain space of the parent DIV irrespective to content heights, and also shouldn't overlap the parent DIV.

HTML:

<div class="outer">
    <div  class="inner-title">
        THIS IS MY TITLE
    </div>
    <div class="inner-content">
        CONTENT AREA
    </div>
</div>

CSS:

html,body
{
height: 100%;
}

.outer
{
    background-color:blue;
    height: 80%;
}

.inner-title
{
    background-color:red;
}

.inner-content
{
background-color:yellow;
    height: auto;
}

In short, "inner-content" should occupy all remaining space of "outer" DIV, without overlapping.

Any idea of how to achieve this?

Any help on this much appreciated.

Answer 1

Add display:table; to parent div and display:table-row; to child divs

And height:0 to first child div. This takes auto height

    html,body{
    height: 100%;
}
.outer{
    background-color:blue;
    height: 80%; border:red solid 2px;
    display: table;
     width:100%
}
.inner-title{
    background-color:red;
    display:table-row; 
     width:100%
}
.inner-content{
    background-color:grey;
    display:table-row;
    width:100%;
    height:100%
}

DEMO UPDATED

Answer 2

A newer CSS way would be using flexbox

/*QuickReset*/ *{box-sizing:border-box;margin:0;} html,body{height:100%;}

.flex-col {
  display: flex;
  flex-direction: column; /* or:   flex-flow: column wrap; */
  height: 100%;
}

.flex-fill { /* Add this class to the element you want to expand */
  flex: 1;  
}

<div class="flex-col">
    <div style="background:red;"> HEADER </div>
    <div class="flex-fill" style="background:yellow;"> CONTENT </div>
    <div style="background:red;"> FOOTER</div>
</div>