How to make a table fill available height in Chrome?

Question

I'm making a page that has a header, a table and a footer. The header and footer have a fixed height, and the table is supposed to fill the rest of the page height, with some rows having a fixed height and some expanding to fill the remaining height.

After a bit of research I made it work using flex layout, except that it doesn't work in Chrome. FF/IE/Edge stretches the table as I want, but not Chrome for some reason. What am I doing wrong?

CodePen example: 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;
}