Zwei DIVs in DIV. Wie füllt man den Raum des Eltern-DIV automatisch mit dem zweiten DIV?

Question

Bitte besuchen Sie this fiddle, um zu sehen, was ich meine -

Ich habe eine Eltern DIV, innerhalb der zwei DIV in vertikaler Reihenfolge angeordnet sind. Der obere DIV sollte nur die Höhe seines Inhalts haben, während der untere DIV den gesamten verbleibenden Speicherplatz des übergeordneten DIV unabhängig von den Inhaltshöhen belegen sollte und auch nicht den übergeordneten DIV überlappen sollte.

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; 
} 

Kurz gesagt, "inner-content" sollten alle verbleibenden Platz von "außen" DIV besetzen, ohne zu überlappen.

Eine Idee, wie dies zu erreichen ist?

Jede Hilfe auf diese sehr geschätzt.

Answer 1

hinzufügen display:table; Mutter div und display:table-row; zu Kind divs

Und height:0 zum ersten Kind div. Dies geschieht automatisch Höhe

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

Ein neuerer CSS Weg 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>