Css 嵌套flexbox在IE10和IE11上添加了空空间

我正在使用flexbox进行布局。我的限制是图像必须位于中间

我做了一个最低限度的标记，再现了这个问题：

它在除IE10和IE11之外的所有浏览器中都能很好地工作，IE10和IE11（如代码笔所示）在图像的顶部和底部添加了大量的空白

.collection__list {
  display: flex;
  flex-wrap: wrap;
}

.product-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-item__figure {
  position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 0 auto;
}

.product-item__figure > a {
  display: flex;
    position: relative;
    flex: 1;
}

.product-item__image-wrapper {
    position: relative;
    width: 100%;
}

.product-item__image {
      display: block;
    margin: 0 auto;
  max-width: 100%;
}

我尝试了很多修复，玩了

flex-shrink

，

flex-grow

。。。但是在失去一整天之后，我很想知道我做错了什么

---

谢谢

哦。。。我是偶然发现的。将

overflow:hidden

添加到

product-item\uu图中

实现了这个技巧……

很酷的答案。你能解释一下这背后的逻辑吗？它在IE10中工作吗？不，我不能：D。我不确定它为什么需要它。但是，是的，它在IE10中也起作用。Edge（和任何其他浏览器）不需要此修复程序。只有IE10和11。