Div that flexible by content, but stretched by body tag (height)

I have div container, stretched vertically to 'body':

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding-top: 51px; /* bootstrap menu in the top */

Inside it I have 2 DIVs on the one level.

• The 1st (RED) must be stretched to browser's window. But it minimal height shouldn't be smaller, than the second's height.


• The 2nd (BLACK) have 2 fixed heights (changing by JS).

What I need:

Red and Black DIVs are placed on ONE level and have position: absolute.

DIV1 stretches to browser window. And it doesn't stop even when browsers height become smaller than BLACK div's height.

So I can't set DIV1 min-height to fixed value (in that case my problem could be solved).

Can I solve this problem WITHOUT using JS, but only with CSS+HTML?

UPDATE: jsFiddle example