CSS flex-grow が IE で効かない

2021/04/08 HTML CSS IE

IE11 で CSS の flex-grow が縦方向に効かないときの対処法。要は親要素に明示的に height を指定すれば解消される。

やりたいこと 

以下のような HTML で main のコンテンツ量が少ないときでも、footer はブラウザの一番下に張り付いてて欲しいときってあるじゃないですか。（あるんです）

<body>
  <header>HEADER</header>
  <main>MAIN</main>
  <footer>FOOTER</footer>
</body>

Chrome や Firefox では CSS の flex を使って以下のように CSS を設定すれば、main が伸長して footer が思っている通りに一番下に張り付いてくれます。

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex-grow: 1;
}

こんな感じになります。main が伸長して footer が一番下に張り付いています。 main が伸長

ところが IE では main が伸長してくれません。IE では、以下 philipwalton 氏の flexbugs の通り min-height では子要素が親要素のサイズが取れないらしく、 flex-grow を設定する親要素に明示的に height が設定されていないと伸長しないようです。

In IE 10-11, min-height declarations on flex containers work to size the containers themselves, but their flex item children do not seem to know the size of their parents. They act as if no height has been set at all. － GitHub - philipwalton/flexbugs: A community-curated list of flexbox issues and cross-browser workarounds for them.

IEに対応する 

ということで height: 0; を親要素に設定します。

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: 0; /* for IE */
}

main {
  flex-grow: 1;
}

これで無事に IE でも main が伸長して、footer が一番下に張り付いてくれるようになりました。

あとがき 

IE11 で flex-grow を縦方向に効かせるやり方を説明しました。IE11 の flex 関連のバグは他にも多数あるようですが、日本企業ではまだまだ IE を使っていることが多いので大変ですね。