【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以下になったら、特定のスタイルが当たる」みたいな感じに指定できます。*

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

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

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

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

https://caniuse.com/css-container-queries

### ○ Container Style Queries

:::note warn
Container Style Queriesは現在サポートされているブラウザが限られており、実用的ではありません。使う際は、こちらをご確認ください。→[Can I use](https://caniuse.com/css-container-queries-style)
:::


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

具体的には、↓こんなかんな感じに指定します!
```css
.parent {
  --text: body;
}

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

https://caniuse.com/css-container-queries-style



## Container Queries のバグ

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

### 現象

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

↓　こんな感じ。
<p class="codepen" data-height="750" data-default-tab="result" data-slug-hash="ZEmWMdq" data-editable="true" data-user="sp_degu" style="height: 750px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/ZEmWMdq">
  Bug - Container Queries </a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 原因

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

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

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

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

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

*<font color="gray">間違ってたら、コメントください。🙏</font>*

## 解決方法

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

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

<p class="codepen" data-height="500" data-default-tab="result" data-slug-hash="ExOKdOP" data-editable="true" data-user="sp_degu" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/ExOKdOP">
  Bug - Container Queries </a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

*<font color="gray">上記の例だと、`widht: 160px;` を `.container-queries` に指定してあげる。</font>*

　

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

<p class="codepen" data-height="500" data-default-tab="result" data-slug-hash="KKrzbMW" data-editable="true" data-user="sp_degu" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/KKrzbMW">
  Bug Fixed 2 - Container Queries </a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
　

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

*イメージ ↓*
```diff_css
.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が作られるため、子要素に幅ができます。

*イメージ ↓*
```diff_css
.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)のフォローをお願いします。

https://twitter.com/degudegu2510