Максимальная ширина привязки и изображения к родительскому контейнеру и высота масштабирования не работают в IE11

Question

У меня есть код ниже.

Я хочу, чтобы изображение max-width было ограничено / масштабировано по ширине контейнера, а высота свободна.Он работает в Chrome / Firefox, но не в IE11

.cimage { 
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid red;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-pack: center;
    justify-content: center;
    padding: .75rem;
    width: 5.5rem;
}

.cimage img { 
  max-width: 100%;
  min-width:1px;
}

<div class="cimage">
   <a href="/">
    <img src="https://via.placeholder.com/250x150">
   </a>
</div>

Снимок экрана IE:

Answer 1

Добавьте flex: 1 или min-width: 1px к flex item - элемент a, чтобы исправить это и в IE11.Смотри демо ниже:

.cimage { 
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid red;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-pack: center;
    justify-content: center;
    padding: .75rem;
    width: 5.5rem;
}

.cimage img { 
  max-width: 100%;
  min-width:1px;
}

.cimage a { /* ADDED */
  flex: 1;
}

<div class="cimage">
   <a href="/">
    <img src="https://via.placeholder.com/250x150">
   </a>
</div>