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

please visit this fiddle see mean -

i have parent div, within there 2 divs placed in vertical order. top div should have height of content, whereas bottom div should occupy remain space of parent div irrespective content heights, , shouldn't overlap parent div.

html:

<div class="outer">     <div  class="inner-title">         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 remaining space of "outer" div, without overlapping.

any idea of how achieve this?

any on appreciated.

add display:table; parent div , display:table-row; child divs

and height:0 first child div. 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