flexboxの孫要素にheight:100%が効かない理由はなぜですか 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% ()

**TL;DR**

Chrome (Blink) Safari (Webkit)

Chrome165 Chrome 51

SafariSafari 11177Safari 10 flexboxgrow/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`

<
<

2014FirefoxIE11ChromeSafari

<
<

`.flex-child` `display: flex` `.flex-grandchildren` `height: 100%`

*1: `align-self:auto` flex container `align-items: stretch`