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
![flexboxの孫要素にheight:100%が効かない理由はなぜですか](https://cdn-ak-scissors.b.st-hatena.com/image/square/f6bc393cd0b6bd2196935e603c5d031bd6ca6699/height=288;version=1;width=512/https%3A%2F%2Fcdn.sstatic.net%2FSites%2Fja%2FImg%2Fapple-touch-icon%402.png%3Fv%3D1cfb10b305ca)