flexbox IE11で起きるバグやずれに立ち向かう

flexboxを使うとレイアウトが楽なんですが、たまにIE11でレイアウトの崩れが発生します。

その時の解決方法を備忘録としてまとめました。

IE11で子要素の画像やテキストの横幅が突き抜ける

flex_210603

IE11でflexboxのflex-direction: columnを使用した時、子要素の横幅が突き抜ける。

解決方法

親要素にwidth: 100%を指定

.flex{
    display: flex;
    width: 100%;
    flex-direction: column;
}

画像の下に大きな隙間ができる

flex_bug

IE11でflex-direction: columnを指定した子要素の中の画像の下に大きな隙間ができる。

解決方法

子要素にflex: 0 0 autoを指定で解決

<div class="flex">
    <figure class="image"><img src="" alt=""></figure>
</div>
.flex {
  display: flex;
  flex-direction: column;
}
.flex .image{
    flex: 0 0 auto; /*または min-height: 0%;*/
}
  • このエントリーをはてなブックマークに追加

プロフィール

kura

WEBで食べていきたいデザイナーです。 趣味でアプリ開発(ペア、デザイン担当)やNuxt.jsやらをいじってますが、やばいな~と感じつつネットの波に取り残されないようにワカッタこと、キヅイタことをカキカキします。