css - 子 div 扩展到父级的剩余部分

Question

我有一个 div，其中包含两个堆叠的 div。

.container {
    position: fixed;
    padding:4px;
    top: 1px;
    left: 1px;
    width:200px;
    height: 200px;
    border: 4px solid #999;
}
.box1 {
    position: relative;
    height: 50px;
    border: 4px solid #f00;
}
.box2 {
    border: 4px solid #00f;
    height: 100%;
    position: relative;
    overflow: auto;
}

<div class='container'>
    <div class='box1'></div>
    <div class='box2'>
        <div style='height:400px;width:10px;background-color:#000;'></div>
    </div>
</div>

我不希望 DIV2 扩展超过父 div，无论 DIV1 占用多少空间(因为它会随着某些选择而扩展)，并且我希望 DIV2 滚动。我认为 100% 高度可以做到这一点，但它会将其扩展为与父 div 相同的值，这是预期的行为。表格似乎可以做到这一点，但我不想使用表格。

这是一个示例(在示例中，蓝色 div 应停在灰色 div 的底部):

http://jsfiddle.net/gateshosting/uJ7Ns/

Answer 1

工作中jsfiddle

设置框的高度等于可用高度减去边框高度减去边距高度

 box2 {
    border: 4px solid #00f;
    height: 134px;
    position: relative;
    top: 0;
    left: 0;
    overflow: auto;
}