max-width：100％并在IE11中显示：flex

Question

为了将图像置于引导行中心，我使用display: flex。

当 缩放 时，除IE之外的所有浏览器中的图像都表现良好。

请参阅IE的屏幕截图：

和其他浏览器：

和代码：

.container {
  width: 100%;
}
.row {
  display: flex;
}
.col {
  display: flex;
  display: -ms-flexbox;
  align-self: center;
}
.col > div {
  align-self: center;
}
[class*='col-'] {
  border: 1px solid red;
}
.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

<div class="container">
  <div class="row">
    <div class="col-xs-4 col" id="col1">
      <div>
        <img id="img1" class="img img-responsive" src="http://placehold.it/200x100">
      </div>
    </div>
    <div class="col-xs-4">
      <div>
        <img class="img img-responsive" src="http://placehold.it/350x150">
      </div>
    </div>
    <div class="col-xs-4">
      <div>
        <img class="img img-responsive" src="http://placehold.it/350x150">
      </div>
    </div>
  </div>
</div>

我的问题是在IE中出现这种行为的原因是什么？是否有针对此问题的纯CSS解决方案？现在我有一个JavaScript解决方案，在窗口调整大小时调整图像宽度。

由于