flexboxとmin-heightの組み合わせがIE11で効かない

flexboxとmin-heightの組み合わせで指定した際、IE11で意図した表示にならなかったので、その際の対応方法をメモ。

サンプルコード

以下のようにメインコンテンツ(.main)とサイドバー(.sub)があるとします。

HTML

<div class="contents">
  <div class="sub">
    <p>サブコンテンツ</p>
  </div>
  <div class="main">
    <p>メインコンテンツ</p>
  </div>
</div>

コンテンツの高さがブラウザ高さより低い場合に背景をブラウザ高さまで伸ばすようにしたかったので、以下のように設定しました。

CSS

.contents {
	display: flex;
	width: 100%;
	min-height: 100vh;
	height: 100%;
}
.sub {
	width: 250px;
	background: darkgray;
}
.main {
	flex: 1;
	background: gray;
}

.contentsに対してdisplay: flexとmin-height: 100vh を設定して、最小の高さをブラウザ高さにしました。
これでchromeやfirefox、edgeでは問題なかったのですが、IEではmin-heightが効いていないようでした。
IEで上手くいかなかった場合のデモページ
　

min-heightではなくheightに対して100vhを指定することで、コンテンツ高さが低い場合のIEの表示は他と同じ表示になりました。

CSS

.contents {
	display: flex;
	width: 100%;
	height: 100vh;
}
.sub {
	width: 250px;
	background: darkgray;
}
.main {
	flex: 1;
	background: gray;
}

コンテンツ高さが低い時に上手くいったデモページ

ただ、コンテンツ高さがブラウザ高さより高い場合に、どのブラウザでも背景が切れてしまうようになりました。
コンテンツ高さが長い場合に背景が切れてしまうデモページ
　

最終的に.contentsに親要素を追加して、その要素に対してdisplay: flexを追加することで、IEでも最小の高さを設定することができました。

HTML

<div class="page">
    <div class="contents">
    <div class="sub">
      <p>サブコンテンツ</p>
    </div>
    <div class="main">
      <p>メインコンテンツ</p>
    </div>
  </div>
</div>

CSS

.page {
	display: flex;
}
.contents {
	display: flex;
	width: 100%;
	min-height: 100vh;
	height: 100%;
}
.sub {
	width: 250px;
	background: darkgray;
}
.main {
	flex: 1;
	background: gray;
}

IEでも最小高さを設定するデモページ

コンテンツ高さが長い場合も問題なさそうでした。
コンテンツが長い場合のデモページ