こんにちは。三鷹市でホームページ制作をしているYUJIYAMASAKIです。

display: flexで高さを自動で合わせられるのは、子要素までです。

孫要素の高さも合わせるには子要素にもdisplay: flexを指定し、横並びになってしまった要素をflex-direction: columnで縦並びに戻します。

さらに、flex-grow: 1を追記することで孫要素の高さも揃います。