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%を指定しているのに
親要素(背景色:青)の高さと同じ高さにならない理由はなぜでしょうか?