21428

[code]

    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%;
    }
[/code]

[code]

    <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>
[/code]

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


CC BY-SA 3.0
2016-01-28T05:20:25.780
21422
2017-07-27T07:20:39.460
2016-01-29T09:13:02.103
76
4191
question
html css
flexboxの孫要素にheight:100%が効かない理由はなぜですか


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

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

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

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


CC BY-SA 3.0
2016-01-28T05:56:27.327
21425
2016-01-28T05:56:27.327
3475
21422
answer


**TL;DR**

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

Chromeでは[16年5月に公開された Chrome
51](http://googlechromereleases.blogspot.jp/2016/05/stable-channel-
update_25.html)で修正されました。

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` を継承しているので。


CC BY-SA 3.0
2016-01-28T07:22:11.920
21428
2017-07-27T07:20:39.460
2017-07-27T07:20:39.460
8000
8000
21422
answer