IE11中的Flex模式

Question

我已准备好在Chrome中运行完美的模态，但在IE中崩溃了。 你能检查一下我做错了什么吗？我尝试了多个后备前缀等，用flex-row包装等等。

http://plnkr.co/edit/Z2pQDsIMjqs4jWvytcVf?p=preview

.flex-container {
  background-color: #ccc;
  width: 100px;
  max-height: 100%;
  min-height: 200px;
  overflow: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.middle {
  flex: 1 1 auto;
  overflow: auto;
  max-height: 100%;
}

适用于Chrome的版本可满足所有要求：

• 模态必须在中间水平对齐
• 页脚和页眉有静态高度
• 当窗户太大时，模态不应再伸展
• 当窗口小到显示完整模态时，回滚应显示为“中间”内容，因此将始终显示页脚和页脚
• 模式应该尽可能小，不要在“中间”内容下显示任何空格，所以我不能在任何包装上设置height: 100%（这会解决问题，但不适合我:(）< / LI>

但是在IE11上，当.middle变大时，它会溢出页脚或使滚动显示在整个模态上。