max-width и flex в IE11 не работает

Question

У меня проблема с использованием flex box и максимальной ширины в IE11. Я провел поиск в Интернете и увидел некоторые решения, но ни одно из них не сработало для меня, и поэтому я разместил новую ветку. Вот мой код:

.story-img {
  padding: 0px 0px 6px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex:1;
}

.story-img img {
  cursor: pointer;
  max-width: 100%;
  height: auto;
  flex-shrink: 0;
}

.row {
  width: 100px;
}

<div class="row">
  <div class="col-xs-12 story-img">
    <div>
      <img class="img-responsive11" alt="" src="https://s3.amazonaws.com/resized.images.stg1.telegraphjournal.com/251861/desktop/comey-mob-analysis-56581436-3f0b-11e8-a7d1-e4efec6389f0.jpg">
    </div>
  </div>
</div>

Итак, как вы видите, я использую max-width для управления изображением большего размера. Он работает во всех браузерах, кроме IE (я использую IE11). Вот пример этого кода: https://codepen.io/hminaee/pen/wXNjBK#code-area

Не могли бы вы мне помочь?

Answer 1

В этом случае, я думаю, единственное, что вам не хватает, это ограничение ширины родительского элемента изображения.

Просто добавьте это к своему коду:

.story-img > div { width: 100% }

пересмотренная кодовая ручка