内容溢出的IE11 Flexbox列容器和页脚始终位于底部 - 内容不会溢出

Question

我在IE11中发现了针对Flexbox报告的类似问题，但没有一个与我的完全一样。

问题：容器位于屏幕中心，设置宽度和最大高度。在容器内部有一个内容div（设置为flex-shrink和overflow：auto）和div for footer（flex-shrink disabled）。在IE11中，当窗口无法容纳内容时，容器溢出，内容div不显示垂直滚动条。在Chrome，Edge和Firefox上，它可以正常运行。

相关代码：http://codepen.io/anon/pen/ggqpEz

<div class="container">
  <div class="content">
    Some content
    Large content
    Large content
    Large content
    Large content
  </div>

  <div class="footer">
    Footer
  </div>
</div>

.container {
  border: 1px solid black;
  position: absolute;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 10%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
}

.content {
  border: 1px solid red;
  flex-shrink: 1;
  overflow: auto;
}

.footer {
  border: 1px solid green;
  flex-shrink: 0;
}

你有什么想法吗？ 将内容div上的max-height设置为ie。 70vh使它在窗口很小时显示滚动条，但它并不是真正的解决方案。