html - How can the top DIV from two stacking DIVs affect the other's height -

as title suggests, have 2 stacking <div>s.

they placed in absolutely positioned container covers whole page. basically, 2 <div>s, taken together, should cover whole space of containier.

another important aspect these <div>s have dynamic content. bottom 1 can have lot of content, overflow: auto rule required. top 1 can have dynamic content, it's not expected grow out of control. thus, don't want cut overflow.

the main question is: how can top 1 affect other one's height without risk of overlapping? (i prefer css only solution, or wouldn't imply js pixel values computations)

here 2 images describe best i'm trying achieve:

1. "initial state"
2. a state more data in top div

here jsfiddle convenience: http://jsfiddle.net/60qan4t6/

this kind of situation display:flex handles extremely well. update fiddle: http://jsfiddle.net/60qan4t6/1/

note, wrote this, it's missing browser prefixes support browsers, fiddle should work in chrome fine.

be sure see check browser support flexbox here: http://caniuse.com/#feat=flexbox