【IEバグ】flex-direction: column;を指定した時に画像の下に余白ができるバグ解消【CSS1行で解決】

「PC表示の時はflexboxで横並びにし、スマホ表示の時は追加でflex-direciton: column;を指定して縦並びに表示」

レスポンシブ対応の時によく書く記述だと思います。

1、2行でレスポンシブ対応できてしまうのでとても便利ですよね。

しかし、IE11(Internet Explorer 11)でflex-direciton: column;を使用した際、画像の下に謎の余白ができるというバグが起きます。

スマホでIEを使うことはないのでそこまで気にしなくてもいいかもしれませんが、コンパクトなPCやブラウザ幅を縮めた時にレイアウトが崩れてしまうのはやはり気になります…

今回はこのIEバグのサンプル紹介と解決方法をご紹介します！

flex-direciton: column;を指定した時のIEバグを確認

実際にどのようなバグが起きるのかサンプルコードを用いて見てみます。

以下、サンプルコードです。今回の検証に関係ない記述は省略しています。

HTML

<div class="test-box">
    <div class="item">
        <img src="/img/common/sky1.jpg" alt="">
        <p>テキスト</p>
    </div>
    <div class="item">
        <img src="/img/common/sky2.jpg" alt="">
        <p>テキスト</p>
    </div>
</div>

CSS

.test-box {
  display: flex;
}

.test-box .item {
  padding: 0 20px;
  width: 50%;
}

.test-box p {
  margin: 10px 0;
}

@media screen and (max-width: 768px) {
  .test-box {
    flex-direction: column;
  }
  .test-box .item {
    width: 100%;
  }
}

正しい表示

まずは他ブラウザでの正しい表示を確認してみましょう。

PC表示

スマホ表示の時は、flex-direction: column;を指定されているので縦並びになります。

スマホ表示

表示は特に問題ないですね！

IEでの表示

しかし、IEだと以下のように下に余白ができてしまいます。

このバグはテキストのみだと起きず、画像を入れていると起きます。

綺麗にレスポンシブ対応したと思ったらIEで崩れてて何事！(日常茶飯事)と思いますが、このバグはたった1行で解決できます。

【解決方法】min-height: 0%;を画像の親要素に追加するだけ！

検証ツールで見てみると、どうやら元々の画像の高さがバグによって含まれてしまっているようです。

このバグの解決方法はとっても簡単で、画像の親要素にmin-height: 0%;を指定するだけです。

今回のサンプルコードだとitemクラスを指定しているdivタグになります。

.test-box .item {
  padding: 0 20px;
  width: 50%;
  min-height: 0%;
}

min-height: 0%;を指定しても他のブラウザやスタイルに影響はないため、flex-direciton: column;を使用する際は問答無用で指定してしまっていいと思います。

ちなみに、min-height: 0px;では効かないようなので、必ずmin-height: 0%;と指定するようにしましょう。

まとめ

細かなバグですが、IEのシェア率がそれなりにある以上、できればIEの対策はしておきたいところです。

たった1行で解決できるのでflex-direction: column;を使用する際は覚えておくといいでしょう！

こちらもおすすめ

【IEバグ】flex-direction: column;を指定した時に画像の下に余白ができるバグ解消【CSS1行で解決】