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

Спасибо

Ответы

Ответ 1

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