flexの入れ子の高さについて

cssのflexを使った際に引っかかった部分がありましたのでまとめてみました。
flexは横並びにしたブロックの高さを自動的に揃えてくれます。
しかし、下記のようにタイトルとテキストで分かれている時はタイトルの高さを揃えてはくれません。

See the Pen
flex by kahsin0033 (@kashin0033)
on CodePen.

タイトル部分の高さを揃えたい場合

タイトルの高さを揃えたい場合は「min-height」を使用しタイトルの高さを揃えます。
「min-height」で指定する高さは一番高いコンテンツの高さを指定します。
下記で言うところの中央のブロックにあるタイトル部分です。

See the Pen
flex02 by kahsin0033 (@kashin0033)
on CodePen.

まとめ

以上がflexで入れ子になったブロックの高さを揃える方法でした。
横並びにする方法は他にも「inline-block」や「table-cell」などがありますので対応ブラウザに合わせて実装を考えた方がいいと思います。