CSS Box Flex固定高度容器，可调整​​顶部和滚动底部

Question

我想布局一个标题，它将垂直调整大小以适应内容，并且页脚将垂直调整其余部分，然后滚动给定一个固定大小容器的任何溢出。使用CSS box-flex我有一个适用于Chrome而不是Firefox的示例（http://jsfiddle.net/V4Uc2/）。我需要添加哪些CSS样式才能确保Firefox不允许任何容器溢出并像Chrome一样行事？这里是内联代码：

<style> 
    .container 
    { 
    background: #fee; 
    height: 400px; 
    width: 400px; 
    display: -webkit-box; 
    display: -moz-box; 
    display: box; 
    -webkit-box-orient: vertical; 
    -moz-box-orient: vertical; 
    box-orient: vertical; 
    } 
    .header 
    { 
    background: #fee; 
    -webkit-box-flex: 0; 
    -moz-box-flex: 0; 
    box-flex: 0; 
    } 
    .footer 
    { 
    background: #eef; 
    overflow: auto; 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    box-flex: 1; 
    } 
</style> 

<div class="container"> 
    <div class="header">...</div> 
    <div class="footer">...</div> 
</div> 

Answer 1

在您的页脚的CSS描述添加

width: 100%; 

。

防止水平溢出，firefox保持你的400像素，然后固定宽度。