コンパイラかく語りき

import { Fun } from 'programming'

【CSS】display: flex 指定の子要素の高さが伸びてしまう問題への解決策

解説

例えば、以下のような構造。

 

div の中に2つの要素があり、display: flex で横並びにしている。

 

ここで、右側の要素は height: 100px を指定している。

 

すると、左側の要素も height: 100px となってしまう。

 

左側の要素の height を保つ 方法。

 

解決策

display: flex を指定している親要素に、align-items: flex-start; も併せて指定すればOK。

 

 

align-items - CSS: カスケーディングスタイルシート | MDN