flexで孫要素の高さを揃える方法

カード風デザインを実装するとき、孫要素の高さが揃わない・位置が決まらないことはありませんか。

カードが横並びのとき、flexで実装するケースが多いかと思います。
flexで孫要素の高さを揃えるためには、flex-grow: 1;を書くだけでOKです。

なぜflex-grow: 1;で高さが揃うのか

カードの高さは、中に入っているパンの画像やテキストの量で高くなったり低くなったりします。
すべてのカードの中に入る要素の量がすべて同じであれば良いのですが、中に入る要素の量がバラバラなときそれぞれのカードの高さもバラバラになります。

一番高いカードの高さに合わせれば、高さが揃って綺麗になります。
なので、カードの中にある.card__text にflex-grow: 1;を設定して、余白を埋める役を担ってもらいましょう。

.card__text がflex-grow: 1;で伸びたおかげで、各カードのテキスト部分が余った高さを埋めて、結果的にカード全体の高さが揃う仕組みです。

flex-grow: 1;したのに高さが揃わない

カードを覆う親要素（ここではcard__list）にalign-itemsを指定していませんか？
flex-grow: 1;を使う時に親要素に指定できるalign-itemsは、align-items: stretch;のみです。

align-items: stretch;以外を指定すると何が起こる？

align-items: stretch;以外を指定すると、 カード要素 (card__item) 内のフレックスアイテム（.card__text など）は、中身のコンテンツのサイズのままで固定されます。
サイズが固定されて余白が伸びなくなるので、flex-grow: 1; の効果が消えてしまいます。
その結果テキスト量が少ないカードは高さが小さくなり、バラバラになってしまうというわけです。

---

subgridでも似たようなことができますが、flexの方が触る機会が多い・一行書き足すだけで実装できるのでこちらを重宝しています。