如何在Chrome中填充表格填充高度？

Question

我正在创建一个包含页眉，表格和页脚的页面。页眉和页脚具有固定的高度，表格应该填充页面高度的其余部分，其中一些行具有固定的高度，一些行扩展以填充剩余的高度。

经过一些研究后，我使用flex布局工作，除了它在Chrome中不起作用。 FF / IE / Edge按我想要的方式拉伸桌子，但出于某种原因不是Chrome。我做错了什么？

CodePen示例： http://codepen.io/anon/pen/memxjP

HTML：

<div class='flexbox'>
  <div class='flex'>
    <h1>Header</h1>
    <div class='flex-child'>
      <table>
        <tr><td>xx</td></tr>
        <tr class='fill'><td>xx</td></tr>
        <tr><td>xx</td></tr>
        <tr class='fill'><td>xx</td></tr>
        <tr><td>xx</td></tr>
      </table>
    </div>
  </div>
  <div class='footer'>
    footer
  </div>
</div>

CSS：

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.flexbox {  
  background: black;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.flex {
  background: blue;
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.flex-child {
  flex: 1;
  background: red;  
}

table {
  height: 100%;
  width:100%;
  border: solid thin white;
}

h1 {
  height: 2em;
}

tr {
  height: 1em;
}

tr.fill{
  height: auto;
  background-color: white;
}

td {
  border: solid thin black;

}

.footer{
  background: green;
  width: 100%;
  height: 5em;
}