css - 嵌套的 flexbox 在 IE10 和 11 上添加空白空间

Question

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

我做了一个重现问题的最小标记: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...但是在失去了一整天之后，我很乐意知道我做错了什么。

谢谢

Answer 1

哦……偶然发现的。将 overflow: hidden 添加到 product-item__figure 就成功了....