嵌套的flexbox在IE10和11上添加了空白 [英] Nested flexbox adds empty space on IE10 and 11

问题描述

我使用flexbox作为布局。我的约束是图像必须位于中间。

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

在所有浏览器EXCEPT在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 ...但是在整整一天失去后，我很想知道我在做什么。

感谢

解决方案

它偶然。添加 overflow：hidden 到 product-item__figure

I'm using flexbox for a layout. My constraint is that the image must be situated at the middle.

I've made a minimal markup that reproduces the issue: http://codepen.io/anon/pen/xwNomN

It works perfectly well in all browsers EXCEPT on IE 10 and 11, where (as shown in the CodePen) a big amount of empty space is added at the top and bottom of the image.

.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%;
}

I've tried a lot of fixes, played with flex-shrink, flex-grow... but after 1 whole day lost, I'd love to know what I'm doing wrong.

Thanks

解决方案

Oh... I've found it by chance. Adding overflow: hidden to product-item__figure made the trick....

这篇关于嵌套的flexbox在IE10和11上添加了空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！