div样式布局问题

Question

有这样个布局，上面的div固定高度，下面的div高度不固定，但是要充满下面的空间。
而不知道外层红色div高度，是根据窗口的高度改变而改变。
要下面那个蓝色的div自适应高度，当下面div中的内容溢出时显示滚动条。

这个需求该怎么实现，要求css

Answer 1

.red-div {
    position:relative;
}
.blud-div-bottom {
    position:absolute;
    top: 上面div的高度;
    bottom: 0;
    width: 100%;
    overflow-y: auto;
}

Answer 2

用css3的calc()写：
布局：
<div class="red">

<div class="blue"></div>
<div class="blue2">写很多很多内容，随意改变最外层红色盒子高度试试</div>

</div>
样式：
.red {

    border: 1px solid red;
    width:200px;
    height: 300px;/*height高度随便改*/
}
.red div {
    border: 1px solid blue;
    box-sizing:border-box;
}
.blue {
    height: 100px;
}

.blue2 {
    height: calc(100% - 100px);
    overflow-y:auto;
}

Answer 3

用百分比布局

Answer 4

css3的flex布局

Answer 5

flex布局