具有calc max-height的IE和CSS弹性框具有窗口大小调整问题

Question

我在项目中有一个用例，其中有一个模式使用css calc来确定它的位置。

JsFiddle：https://jsfiddle.net/mderrick/7k9zx6c7/

.modal {
  position: relative;
  display: flex;
  display: -ms-flexbox;
  top: 2.286rem;
  max-height: calc(100% - 2.286rem * 2);
  max-width: calc(100% - 2.286rem * 2);
}

在Chrome上，它可以根据需要运行。我可以调整浏览器的大小，并且模态保持完美定位。

问题出在IE10（显然）上模态最初加载的地方，它超过了max-height，直到我调整窗口大小。这会将模态捕捉到正确的高度，但是当我缩短窗口时，它会被卡在此高度，除非我调整窗口 width 的大小，它会重新回到它原来的（但是错误的太高）高度。希望以下GIF可以提供帮助：

渴望vs IE

我欢迎所有的建议。感谢。

Answer 1

在IE10和IE11中，如果容器具有最小高度但没有明确的高度属性，则具有display：flex和flex-direction：column的容器将无法正确计算其弯曲的子尺寸。 - Source

更新了jsfiddle以试用。 我更改了CSS以反映caniuse.com所说的内容。

.modal {
  position: relative;
  display: flex;
  display: -ms-flexbox;
  top: 2.286rem;
  height: calc(100% - 2.286rem * 2);
  max-height: calc(100% - 2.286rem * 2);
  max-width: calc(100% - 2.286rem * 2);
  box-shadow: 0 5px 15px rgba(0,0,0,.5);
}