嵌套的 flexbox 在 IE10 和 11 上增加了空白空间答案

【问题标题】：Nested flexbox adds empty space on IE10 and 11嵌套的 flexbox 在 IE10 和 11 上增加了空白空间
【发布时间】：2016-02-28 04:02:27
【问题描述】：

我正在使用 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...但是在失去了一整天之后，我很想知道我做错了什么。

谢谢

【问题讨论】：

标签： css internet-explorer-11 flexbox internet-explorer-10

【解决方案1】：

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

【讨论】：

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