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