ie flex配下のimgタグにmax-widthが効かない

レスポンシブ & 縦長とか横長の画像が混在していて、width、heightは固定したくなかった。 色々調べたがどれもうまくいかなかったのでimgタグではなく背景画像指定とした。

以下みたいなソース。

HTML

<div class="wrapper">
  <div class="item">
  <div class="item">
  <div class="item">
</div>

CSS

.wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.item {
    width: calc(50% - 20px);
    height: 300px;
    margin: 10px;
    background-image: url(/test.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-y: center;
    background-position-x: center;
}

トイレ表示のウォールステッカー2 パロディシリーズ (黒)

トイレ表示のウォールステッカー パロディーシリーズ (黒)

バスルームウォールステッカー バスルーム 海外バスタブ お風呂 モチーフ (黒)