css - Positioning two horizontal divs in a dynamic way -

i have 2 divs inside container:

<div id="outer">     <div id="a">         test<br/>                 test<br/>         test<br/>         test<br/>         test<br/>         test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>     </div>     <div id="b"></div> </div> 

what need 'b' stays @ bottom , has fixed size (200px). 'a' should stay @ top , fill rest of space available. when resize parent element 'b' should stay @ 200px , 'a' should shrink.

i wasn't able working pure css prefer have in css only.

i've made fiddle containing solution jquery want avoid javascript layouting whenever it's possible.

http://jsfiddle.net/t6b2e/

you can use display:flex; keep jquery fallback ... or css fallback. whatever here basic example:

body {background:black;color:white;} #outer {   display:flex;   flex-direction:column; } html, body , #outer {   height:100%;   margin:0; }  #a {    overflow:auto;  } #b {   background:blue;   min-height: 200px; /* can use flex:1; size */ } 

important: not use capital letter or numbers first character naming id or class. not allowed , browser follow w3c recommendation. css can not applied.

to have 1 growing , other shrink , overflow, can tune flex:xx;

example both div have min-height , show scrollbar if needed. the blue 1 has priority, other 1 has min-height too, content can still readable

example here.

body {background:black;color:white;} #outer {   display:flex;   flex-direction:column; } html, body , #outer {   height:100%;   margin:0; } #a, #b {   min-height: 100px; /* don't give min-height #a , can shrink down 0 */   overflow:auto; }  #a {    flex:2;  } #b {   background:blue; }