嵌套 Flexbox 在 IE10 和 11 上添加空白空间

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

我做了一个最小的标记来重现该问题：http://codepen.io/anon/pen/xwNomN http://codepen.io/anon/pen/xwNomN

它在除 IE 10 和 11 之外的所有浏览器中都能完美运行，其中（如 CodePen 中所示）在图像的顶部和底部添加了大量空白空间。

.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...但是经过一整天的损失，我很想知道我做错了什么。

Thanks

哦...我偶然发现的。添加overflow: hidden to product-item__figure成功了......