Вложенная 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 ... но после того, как один целый день потерял, я хотел бы знать, что я делаю неправильно.

Thanks

Answer 1

Ох ... Я нашел это случайно. Добавление overflow: hidden в product-item__figure сделало трюк ....