質問です

div "display: flex" の中のアイテム(div)の高さを親の div 内に収めたいです。
親 div の中に 子 div だけ置くとできるのですが、
子 div の中に h2 と div を置くと、h2 の高さのぶんだけ親 div からはみ出してしまいます。

display: flex で、子 div の中に見出しと overflow-y: scroll な div を置きたいとき、
どうすればはみ出さなくなるでしょうか？
見出しと、スクロールバー有りのコンテンツを置いて flex で並べたいです。

https://i.imgur.com/sXA8Rcs.png
https://jsfiddle.net/0dghepau/13/