◆ 子要素に height をつける
  ◆ 大きいとダメなので 0 だと安心
◆ または子要素に display: flex つけて 孫要素に flex-grow: 1 つける 

けっこう昔からあるもので stackoverflow は英語日本語ともに質問がでていました
<style>
    .parent{
        display: flex;
        flex-flow: column;
        height: 400px;
    }
    .child{
        flex-grow: 1;
        background: #aaccff;
        border: 3px solid #ffaaaa;
    }
    .grandchild{
        background: #ccff88;
        height: 100%;
    }
    .child.height-specified{
        height: 0;
    }
</style>
<div class="parent">
    <div class="child">
        <div class="grandchild">100%にならない</div>
    </div>
    <div class="child height-specified">
        <div class="grandchild">100%になる</div>
    </div>
</div>

こんな構造にします
child は flex-grow があるのでそれぞれ parent の半分まで拡張されます
grandchild は 100% があるので child のいっぱいまで広がりそうですが広がりません

child に height を指定すれば grandchild が 100% になります
100px でも 100% でもなんでもいいのですが 大きいと問題が出ます
100% にすると child 2 つで parent のサイズを超えてしまいます

なので 最も小さい 0 を指定しておくのが安心です
flex-grow が 1 なので 実際に 0px にはならず広がってくれます
逆の shrink つけて 100% では縮んでくれません

他の解決策に child も flex container にしてしまうという手もあります
height でなく flexbox の機能で grandchild を child いっぱいにすればちゃんと 100% になります

flexgrandchild100

サンプル