【CSS】Grid・Flexの子要素にContainer Queriesを使ったら、子要素の幅がなくなる!?

はじめに

みなさんは、Container Queriesを使いこなせていますか？

Container Queriesを色々試していた時に、「CSS Grid と Flex Boxの子要素にContainer Queriesを使ったら、子要素の幅がなくなるバグ」に出会ったのでバグの原因と解決策を紹介します。

Container Queries とは？

Container Queriesとは、親・祖先要素のスタイルに合わせて、子要素のスタイルを変更することができるアットルールです。

Container Queriesには、「Container size Queries」と「Container style Queries」の2種類あります。

○ Container Size Querie

Container size Queriesは、祖先要素のサイズに応じてスタイルを指定することができるアットルールです。
例えば、「先祖要素の幅が500px以下になったら、特定のスタイルが当たる」みたいな感じに指定できます。

具体的には、↓こんなかんな感じに指定します!

.parent {
  container-type: inline-size;
/* container: layout / inline-size; */  
}

@container (width < 500px) {
 .child {
    color: red;
  }
}

1. レスポンシブ対応したい要素の祖先要素にcontainer-typeまたはcontainerプロパティを指定します。
2. @container (条件) {...}で上記のようにスタイルを指定します。
   • 条件で使用できるプロパディは以下の通りです。
     • width： widthの値
     • height： heightの値
     • inline-size： inline方向の値
     • block-size： block方向の値
     • aspect-ratio： アスペクト比
     • orientation： 縦長か横長

○ Container Style Queries

Container Style Queriesは現在サポートされているブラウザが限られており、実用的ではありません。使う際は、こちらをご確認ください。→Can I use

Container style Queriesは、祖先要素のスタイルに応じてスタイルを指定することができるアットルールです。
例えば、「先祖要素の--text が bodyになったら、特定のスタイルが当たる」みたいな感じに指定できます。

具体的には、↓こんなかんな感じに指定します!

.parent {
  --text: body;
}

@container style(--text: body) {
 .child {
    color: red;
  }
}

Container Queries のバグ

タイトルにある通り、Container Queriesを色々試していたら、CSS GridとFlex Boxの子要素にContainer Queriesを使ったら、子要素の幅がなくなるバグを見つけたので、バグの原因と解決策を紹介します。

現象

以下のように、Flex Item（display: flexが指定された要素の子要素）やGrid Item（display: gridが指定された要素の子要素）にcontainer-typeを指定したら、その要素の幅がなくなってしまいます。

↓　こんな感じ。

See the Pen Bug - Container Queries by でぐぅー | Qiita (@sp_degu) on CodePen.

原因

Flex Itemで幅がなくなる原因も、Grid Itemで幅がなくなる原因も同じだと思います。
(ただ、正しいかわからないです...)

Container Queriesは、containerプロパティを指定した要素のサイズに合わせて、要素が変わるプロパティになります。

container-nameを指定することで、container-nameを指定した要素のサイズを基準として、スタイルを変えてくれます。
そのため、container-nameのサイズが指定されていないといけません。

しかし、Flex Itemの幅 と 1frが指定されているGrid Itemの幅の最小値は、autoになるため、そのサイズはコンテンツに基づくものになり、サイズが指定されていないことになっているのだと思います。

したがって上記のように、widthがなくなるような挙動になっているのだと思います。(多分)

間違ってたら、コメントください。🙏

解決方法

上記のような原因のため、基本的には、container-nameを指定した要素にサイズを指定してあげればOKです。

ただ↓このように固定幅になってしまうと、コンテナクエリ使う必要ないですよね！！！！！

See the Pen Bug - Container Queries by でぐぅー | Qiita (@sp_degu) on CodePen.

上記の例だと、widht: 160px; を .container-queries に指定してあげる。

　

それを回避するためには、↓このようにするのがいいと思います！！！

See the Pen Bug Fixed 2 - Container Queries by でぐぅー | Qiita (@sp_degu) on CodePen.

　

Flex Boxの場合
container-nameを指定した要素にflex: 1 1 0;を指定してあげることで、widthが作られるため、子要素に幅ができます。

イメージ ↓

.container-queries {
  container-type: inline-size;
  container-name: layout;
+ flex: 1 1 0;
}

　

CSS Gridの場合
CSS Gridの場合は、grid-template-columnsの1frところを minmax(0, 1fr) のように最小値を明確にしてあげることで、widthが作られるため、子要素に幅ができます。

イメージ ↓

.grid {
  align-items: center;
  display: grid;
  gap: 16px;
- grid-template-columns: repeat(3, 1fr);
+ grid-template-columns: repeat(3, minmax(0, 1fr));
}

まとめ

この記事では、CSS GridとFlex Boxの子要素にContainer Queriesを使ったら、子要素の幅がなくなるバグを見つけたので、バグの原因と解決策を紹介します。

原因が本当に正しいかは、わからないですが、僕はこのように理解して、解決策を考えたと思っていただけると嬉しいです。

Container Queries自体、使えるようになったばっかりのため、まだまだ調整しないといけないことが多いアットルールだと思います。

そのため、いずれ修正されて、この記事の意味がなくなることに期待したいです。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。