【CSS Tips】ある程度小要素が増えると横にスクロールするリスト

子要素が少ない時は親要素いっぱいに子要素を表示させて、増えてきたらスクロールするようにしたいなと思いCSSを書いたのでメモがてら記事にしました。

具体的にどんなケース？

子要素の数が1個、1個、3個可変するコンテナを想定しています。
そして、子要素が2個以下でコンテナに収まるときは2カラムで表示し、3個以上で収まらない時は横スクロールで表示します。

ただし、中の要素を数えて当てるCSSを変えるなどということはしません。

CSSの書き方

まずは子要素が1つ、2つ、3つ入ったコンテナをそれぞれ用意し、それぞれのコンテナと子要素に同じクラスを指定します。

そして、コンテナに以下の指定をしておきます。

  display: flex;
  gap: 40px;
  overflow-x: auto;

次に、子要素に以下の指定をします。

  flex-grow: 1;
  min-width: 240px;
  max-width: calc(50% - 20px);

まず、flex-grow: 1;を指定することで、子要素はコンテナいっぱいに横幅を伸ばします。
そして、子要素の最小サイズをmin-widthで指定しておくことで数が増えるとサイズが足りずにコンテナからはみ出すようになります。
あらかじめコンテナにはoverflow-x: auto;が当たっているので、この時に横スクロールするようになります。
また、max-width: calc(50% - 20px);を指定しているので子要素が1つの時は1/2カラム分のサイズになります。

Codepenで作成したものはこちらです。

See the Pen Untitled by かべちよ (@kabechiyo13) on CodePen.