IE11でflexboxの縦幅がおかしい時はflexプロパティの書き方が原因かもしれない

公開2015.08.07
更新2017.12.03
仕事・技術

Windows10が発売されて新ブラウザのEdgeが使えるようになっても、まだまだInternetExplorerの呪縛からは逃れられません；；

今回はフロートを使ったレイアウトではなく今後主流になってくる「フレキシブルボックス」でのレイアウトで発生した問題です。

以下のようなコードがあるとします。

<div id="flexParent">
	<header>ヘッダー</header>
	<main>
		<div class="flexChild left">左</div>
		<div class="flexChild right">右</div>
	</main>
	<footer>フッター</footer>
</div>

よくあるカタチで、縦並びにヘッダー、メインコンテンツ（左右に２カラムあるとします）、フッターがあります。

これらの高さを画面いっぱいにフレキシブルボックス(display:flex)を使ってサイズが自動調整されるように設定しました。

が、chromeではしっかりと画面の高さに合わせてヘッダー、コンテンツ、フッターの幅がいい感じで調整されているのに、なぜかIEだけ縦幅（高さ）が画面高に合わせて調整されません。フロートでのレイアウトでclearをし忘れたような状態になってしまっていました。

かなりハマってしまったのですが、これはCSSのflexプロパティの「ショートハンド」のIE11の挙動がおかしいことが原因でした。
（※こちらのmin-height:100vh;などの設定も合わせて実行しました。）

/* 悪い例 */
.flexChild {
	flex: 1 0;
}

/* 良い例 */
.flexChild {
	flex: 1 0 auto;
}

今回はショートハンドでflexプロパティを書く際に３番目のflex-basisの値に「auto」を設定したら正常化しました。

他のブラウザでは3番目のflex-basisは必要ない場合は省略しても大丈夫だったのですが、どうやらIEの場合は省略せずに「auto」を設定しなければならないようです。

以下はflexをショートハンドで書く場合の項目の並びです。

flex: flex-grow flex-shrink flex-basis ;

ショートハンドとは、margin:0 1px 0 0; やpadding:0 1px 0 0;のように一行で複数のCSSプロパティを書ける便利な書き方なのですが、IE11のflexプロパティの実装がおかしいのかIE11でショートハンドでflexを書く時は注意しなければなりませんね。

まさか原因が「CSSの書き方」にあるなんて思いもせず問題の解消までかなり時間がかかってしまいました^^;

同じ問題でお悩みの方の参考になれば幸いです。