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