cssの flexbox を指定した画像が、IE11だけやや縦長に伸びて表示される

• Bootstrap4のcard-img-topクラスを指定したサムネイル画像がIE11で縦に伸びる – Ewig Leere(Lab2)

Bootstrap4を使用している環境なので、この記事も参照。 タイトルのように、「cssのflexboxを指定した画像が、IE11だけやや縦長に伸びて表示される」という現象に遭遇しました。

HTML

<ul class="listWrapper row">
    <li class="col-md-3 col-6">
        <div class="imgWrapper">
            <img src="../img/IMG.jpg" alt="テスト画像">
        </div>
    </li>
</ul>

css(Scss)

.listWrapper {
    list-style-type: none;
    margin-top: 5rem;
    .imgWrapper {
        display: flex;
        align-items: flex-start;
        background-color: #EFAC83;
        margin-bottom: 2rem;
        img {
            width: 100%;
            height: auto;
            margin: 2rem;
        }
    }
}

このときの正常な表示(Vivaldi)と意図しない挙動(IE)を以下に比較します。

• 

• 

分かりづらいですが、微妙に縦に細長い感じになっています。 今回はBootstrap4のcardコンポーネントは使用しておらず、したがってcard-img-topクラスも付いていないのですが……。 検索してみると、css – Flex layout holy grail content doesn’t grow on IE11 – Stack Overflowで「flex-shrink: 0;またはflex: 1 0 auto;を指定すると良いよ」というコメントが。 それに従って以下のようにcssを修正しました。

css(Scss) ※修正後

.listWrapper {
    list-style-type: none;
    margin-top: 5rem;
    .imgWrapper {
        display: flex;
        align-items: flex-start;
        background-color: #EFAC83;
        margin-bottom: 2rem;
        padding: 2rem; /* imgに対するmarginではなく、ラッパーのdivのpaddingに変更 */
        img {
            width: 100%;
            height: auto;
            flex-shrink: 0; /* 検索して出てきた情報に従って追加 */
        }
    }
}

これで以下のようになりました。

• 

• 

OKですね。 さすがに、そろそろIEとはえんがちょしたいですね。

参考

• css – Flex layout holy grail content doesn’t grow on IE11 – Stack Overflow