[Q&A] CSS Container Queriesの仕様について

CSS Container Queriesの仕様について

Q&A

Closed

FlexやGridにcontainer-typeを指定した子要素があったときに、その要素の幅がなくなってしまうのですが仕様でしょうか。
もし解決方法があれば教えていただきたいです。

事象が確認できるCodePenも埋め込みました。
以下の例だとcontainer-typeをコメントアウトするとBox2のエリアも正しく幅を持った状態で表示されます。

See the Pen Untitled by Kei (@kei05code) on CodePen.

1Answer

原因・理由

FlexやGridにcontainer-typeを指定した子要素があったときに、その要素の幅がなくなってしまうのですが仕様でしょうか。

原因・仕様かどうかまでは、わかりませんでしたが、
挙動を見るに、以下のようになっています。

'display: flex' や 'display: grid`は要素の外部（親要素の振る舞い）と要素の内部（小要素の表示・動作)に変更を与えるプロパティになります。

その要素の内部（小要素の表示・動作)への変更が無効化？継承がうまく行っていないように見えます。
CSS Container Queries 開発状況(ダッシュボード)を見ると、一部のブラウザでは開発中の部分もあるので、バグか、開発中なのかもしれません。

FlexやGridの内部（小要素の表示・動作)への変更が無効化？継承がうまく行っていないように見えるので、いかのようにすれば良さそうです。

※ 意図した修正方法じゃなかったらすみません。🙏

Flex Itemの初期値 flex: 1 1 auto;を明記してあげるのがいいと思います。

.wrapper--useContainer .box2 {
  container-type: inline-size;
  container-name: PinkArea;
+ flex: 1 1 auto;
}

grid-template-columnsの 1frをminmax(0, 1fr)にして、最小値を明記してあげるのがいいと思います。

.wrapper--grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

↓ こうなります。

0Like