Css 获取DIV以影响其先前的元素高度？

我目前有如下情况：

基本上，它只是包含在一个指定了宽度和高度的

容器中的三个div。容器和顶部div的CSS代码如下所示：

.container_div{
    width: 800px;
    height: 500px;
}

.top_div{
    width:100%;
    height:100px;
}

我现在试图为
center\u div
和
bottom\u div
元素提供CSS代码，其方式如下：


底部div没有溢出
底部div可以增长/收缩，而不会导致其父元素更改其大小（类似于底部：0绝对定位）
只要底部div增大，中心div就会缩小，反之亦然

这是底部div增长时应该发生的情况：


我正在寻找一个纯CSS解决方案。Firefox支持就足够了。
这可以通过css表格布局轻松实现。在您的例子中，涉及表行，这将（默认情况下）自动填充其
display:table
容器的空间

在您的情况下，只需设置：


顶部div为固定高度
中间部分的高度应为100%。这会将底部div压缩到其自身的内容高度
底部div为零高度


body{margin:0；}
#容器{
显示：表格；
位置：绝对位置；
身高：100%；
宽度：100%；
颜色：白色；
}
#容器>分区：第n个子项（1）{
显示：表格行；
高度：50px；
背景：红色；
}
#容器>分区：第n个子级（2）{
显示：表格行；
身高：100%；
背景：绿色；
}
#容器>分区：第n个子项（3）{
显示：表格行；
身高：0；
背景：蓝色；
}

第1部分（固定100像素）
第2部分（展开以填充剩余空间）
第3部分（适合自己的内容）
loren ipsum dolor sit amet。。。loren ipsum dolor sit amet。。。loren ipsum dolor sit amet。。。loren ipsum dolor sit amet。。。
发布迄今为止获得的所有html和css。甚至最好做一个JSFIDLE。条件是什么？父div可以增长吗？底部div允许滚动吗？实际上不允许。父维度是固定的。