三鷹市・武蔵野市(吉祥寺)のホームページ制作会社です。三鷹市・武蔵野市(吉祥寺)のホームページ制作なら私たちにお任せください。

BLOG

【1分で解決】flexboxで子孫要素の高さを揃えたい

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

 

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

 

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

 

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