css - Flexbox:flex-shrink 在 IE11 及以下版本中不起作用

Question

我的页面上有一个 block ，其中 2 个图像应该并排放置。根据宽度，它们应该相应地缩放。

感谢上帝，我们有 Flexbox!现在这个演示适用于 Chrome、Safari、FF 和 IE Edge:

http://codepen.io/IbeVanmeenen/pen/PqgOJM

.el {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;

  margin: 4rem 0;
}

.el__wrp {
  display: block;

  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;

  justify-content: space-around;

  min-width: 0px;
}

但问题是在 IE11 和 10 中，flex 收缩似乎被忽略了，导致第一张图片全宽显示，第二张消失了......

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

提前致谢

Answer 1

好的，解决这个问题!

我更新了笔。我测试了原始代码，但用文本替换了图像，并且成功了!所以问题出在图像上。

图像的原始代码是:

.el__wrp img {
  display: block;
  margin: 0;

  max-width: 100%;
  min-width: auto;
}

我把它改成:

.el__wrp img {
  display: block;
  margin: 0;

  width: 100%;
}

现在一切正常!