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