在 Internet Explorer 中包含 100% 宽度图像的 flex 子框的高度不正确

Question

我使用Chris' Coyer approach 使页脚粘在页面底部。

HTML

<div class="container">
  <div class="content-box">
    <div class="image-box">
      <img src="https://i.stack.imgur.com/XIQ2T.jpg">
    </div>
  </div>
  <div class="bottom-box">Bottom</div>
</div>

CSS：

.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* Avoid the IE 10-11 `min-height` bug. */
}
.bottom-box {
  flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */  
  background: #069;
  color: #fff;
  line-height: 3;
}
.content-box {
  flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
}
.image-box img {
  max-width: 100%;
}

效果很好。直到我在 Internet Explorer 11 中遇到了这个问题。如果我将一个大图像放入内框并使用 max-width: 100% 调整它的大小，那么父框在调整大小之前会采用原始​​图像的高度。

实际： 父框在调整大小之前采用原始图像的高度。它在 IE11 中也是如此。

预期：

父框在调整大小后获取图像的高度。它适用于 Chrome、Firefox、Safari。

JSFIDDLE： 为了更好地理解问题，您可以在此处查看代码和示例：https://jsfiddle.net/v9ocv7b6/31/

有人知道如何解决这个问题吗？

Answer 1

你试过为 IE 使用前缀 -ms- 吗？

http://caniuse.com/#search=flexbox