滚动条出现时，Flexbox背景损坏

Question

我正在制作一个包含3行的flexbox列布局。顶部和底部行是标题，它们应该只是适合内容所需的高度。中间行应该增长或缩小。但是，它不应该缩小太多以溢出其内容 - 此时整个窗口应该滚动。

<div class="flex-column" style="background-color: green; height: 100%">
  <div>
    Header
  </div>
  <div style="flex-shrink: 1; flex-grow: 1; overflow-y: scroll; overflow-x: hidden; min-height: 100px; background-color: red">
    <table>
      <tr><td>Row</td></tr>
      <tr><td>Row</td></tr>
      <tr><td>Row</td></tr>
      <tr><td>Row</td></tr>
      <tr><td>Row</td></tr>
      <tr><td>Row</td></tr>
      <tr><td>Row</td></tr>
      <tr><td>Row</td></tr>
      <tr><td>Row</td></tr>
      <tr><td>Row</td></tr>
    </table>
  </div>
  <div>
    Footer
  </div>
</div>

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

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

jsfiddle

这个问题（Chrome 50）是当窗口垂直收缩以便滚动条出现在窗口中时（不仅仅是在内部），当向下滚动以显示页脚时，绿色页脚的背景已损坏 - 它仅延伸到最初。

注意：

• 如果无法达到内部div的最小高度，整个窗口应滚动。
• 我认为一般来说，我不会在内部div上有最小高度，而是在其中一个孩子身上。
• 我所遇到的真正问题实际上是外部div的框架（它是一个Bootstrap面板），而不是作为简单测试用例的背景颜色。见图。