親ブロックが相対的に高さ上限指定されている時に、子ブロックに関しても高さ上限の相対指定を行いたい。

解決したいこと

親ブロックが相対的に高さ上限指定されている時に、子ブロックに関しても高さ上限の相対指定を行いたい。

該当するソースコード

ここでid:child2のブロックの高さ上限の相対指定を行ってparentからはみ出さないようにしたい。

<div id="main" style="height:100vh">
    <div style="height:50px"></div>
    <div id="parent" style="max-height:calc(100% - 50px)">
        <div id="child1"></div>
        <div id="child2"></div> ※対象の子ブロック
    </div>
</div>

具体的には以下のようなレイアウトを考えています。
例1)

例2)

親が相対指定されている時に子が相対指定できない場合上記のレイアウトの実現方法についてもご教授いただけると幸いです。
ご回答宜しくお願い致します。