Getting a relative positioned DIV to take up the remainder of it's parent's vertical space

Question

I'm working on a web application that has a couple widgets positioned all the way on the right using a container DIV with absolute positioning.

The first (top) widget is small but with a dynamic/undefined height.

The second (bottom) widget contains scrollable content and must stretch to fill the remaining space of its parent DIV.

I'm having trouble with the height of the second widget. The 'height:100%' attribute (shown below) stretches the bottom widget DIV to 100% of either the parent DIV or the full viewport (difficult to tell which).

The HTML:

<div class="widget_container">
    <div class="widget1">
        *Dynamic Content*
    </div>
    <div class="widget2">
        *Scrolling Content*
    </div>
</div>

The CSS:

.widget_container {
    position:absolute;
    overflow:hidden;
    width:315px;
    top:75px;
    bottom:25px;
    right:25px; 
}
.widget1 {
    position:relative;
    width:275px;
    height:auto;
}
.widget2 {
    position:relative;
    overflow:auto;
    height:100%;
}