Question

I am trying to layout a header that will resize vertically to fit the content, and a footer that will resize vertically the remaining then scroll any overflow given a fixed size container. Using CSS box-flex I have an example that works in Chrome but not Firefox (http://jsfiddle.net/V4Uc2/). What CSS styles do I need to add to ensure that Firefox doesn’t allow any overflow from the container and acts like Chrome? Here is inlined code:

<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

Add

width: 100%;

in your footer css description.

That prevents an overflow horizontally, firefox keeps your 400px then as a fixed width.