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像素，然後固定寬度。