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

添加

width: 100%;

在您的页脚css说明中。

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