6

html,body
{
  height: 100%;
  margin: 0;
}

.flex
{
  display: flex;
  height: 100%;
}

.flex-child
{
  border: solid 1px gray;
  background: blue;
    
}

.flex-grandchildren
{
  background: red;
  height: 100%;
}
<div class="flex" >
  <div class="flex-child">
    <div class="flex-grandchildren">
      height:100%が効かない
    </div>
  </div>
  <div class="flex-child">
    <div class="flex-grandchildren">
      height:100%が効かない
    </div>
  </div>
</div>

flex-grandchildren(背景色:赤)はheight:100%を指定しているのに
親要素(背景色:青)の高さと同じ高さにならない理由はなぜでしょうか?

2 件の回答 2

8

TL;DR

Chrome系 (Blink) とSafari (Webkit) のバグです。

Chromeでは16年5月に公開された Chrome 51で修正されました。

SafariではSafari 11で修正されたので17年7月現在はまだプレビュー段階ですし、Safari 10 以下を対象にする場合はやはり孫要素もflexboxでgrow/stretchさせる必要があるかと思います。


display: flex が指定された要素を flex container、その直下にある各要素を flex item と言いますが、各 flex item にはデフォルトで align-self:stretch が指定されており*1、これによって flex container の高さ一杯に flex item の高さが調整されています。質問の例では .flex-child がそうですね。

一方 height: 100% という指定は親ボックスの高さから計算されるわけですが、これは親ボックスの高さが確定している場合に限ります。int32_tさんが書かれているように、親ボックスの高さが不定の場合はこの記述は機能しません。

初期の flexbox の仕様では align-self:stretch が指定された flex item も高さ不定という扱いだったのですが、このような flex item の中でパーセント指定を使いたいという要望が出され、align-self:stretch が指定された場合は高さが確定したものとして扱うよう変更されました。

https://www.w3.org/TR/css-flexbox-1/#change-2012-stretch-definite
https://drafts.csswg.org/css-flexbox-1/issues-cr-2012#issue-3

2014年の時点でFirefoxとIE11ではこの通りの挙動になっていたようですが、ChromeとSafariはそうではありませんでした。一応現在ではどちらも修正されています。

https://code.google.com/p/chromium/issues/detail?id=341310
https://bugs.webkit.org/show_bug.cgi?id=137730

代替策としては、.flex-child にも display: flex を指定し、 .flex-grandchildren から height: 100% を取り除く方法があります。

*1: 厳密には align-self:auto ですが、flex container の align-items: stretch を継承しているので。

2

flexboxに限らないのですが、今の状況は

  • flex-child に height 指定がないので、flex-child の高さは flex-childの子供要素 flex-grandchildren の高さで決まります
  • flex-grandchildren の高さは、flex-child の高さの100%です

相互依存しているため、高さが決まりません。

flex-child に height を指定してください。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。