三鷹市のホームページ制作会社です。三鷹・吉祥寺のホームページ制作ならお任せください。

BLOG

flexboxで子孫要素の高さを揃えたい

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

 

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

 

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

 

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