Nested flexbox adds empty space on IE10 and 11

Question

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

score 4 · Answer 1 · edited Nov 26 '15 at 14:39

4

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

edited Nov 26 '15 at 14:39

Michael Benjamin

346,931
104
581
701

answered Nov 25 '15 at 11:38

Michael Gallego

1,746
1
20
29

Cool answer. Can you explain the logic behind this? Does it work in IE10? – Michael Benjamin Nov 26 '15 at 12:08
2

No I cannot :D. I'm not sure why it needs that. But yes, it works in IE10 too. Edge (and any other browsers) does not need this fix. Only IE10 and 11. – Michael Gallego Nov 26 '15 at 14:08

Nested flexbox adds empty space on IE10 and 11

1 Answers1

Linked