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

Question

我使用Chris 的 Coyer 方法使页脚粘在页面底部。

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