Html CSS Box Flex固定高度容器，顶部可调整大小，底部可滚动

我试图布局一个页眉，将垂直调整大小以适应内容，和一个页脚，将垂直调整剩余的，然后滚动任何溢出给定一个固定大小的容器。使用cssboxflex，我有一个例子可以在Chrome中使用，但不能在Firefox（）中使用。我需要添加哪些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>

.集装箱
{
背景：#费用；
高度：400px；
宽度：400px；
显示：-网络工具包盒；
显示器：-moz盒；
显示：框；
-网络工具包盒方向：垂直；
-莫兹盒方向：垂直；
盒子方向：垂直；
}
.标题
{
背景：#费用；
-webkit-box-flex:0；
-moz-box-flex:0；
盒子弹性：0；
}
.页脚
{
背景：#eef；
溢出：自动；
-webkit-box-flex:1；
-moz-box-flex:1；
箱型柔性：1；
}
...
...

添加

在页脚css描述中

为了防止水平溢出，firefox将您的400px保持为固定宽度

width: 100%;