● 1. 親divのコンテナタイプを設定する

.container {
	container-type: inline-size;
}

size：横方向と縦方向のサイズに応じてスタイルを適用する
inline-size：横方向のサイズに応じてスタイルを適用する
normal：通常動作

● 2. レスポンシブにしたいdivに @container を記述する

親DIVの横幅が300px以内の場合

@container (max-width: 300px) {
  .child {
    /* スタイル定義 */
  }
}

対象となるコンテナ:

@container クエリは、直近の祖先要素の中で container-type プロパティが設定されている要素を対象とします。 これは必ずしも1つ上の親要素とは限りません。最も近い適切なコンテナを探します。

複数のコンテナ:

複数の要素をコンテナとして定義することができ、それぞれに対して異なるクエリを適用できます。 container-name プロパティを使用して、特定のコンテナを名前で指定することもできます。

複数のコンテナを持つ例

/* 複数のコンテナを持つ例 */
.outer-container {
  container-type: inline-size;
  container-name: outer;
}

.inner-container {
  container-type: inline-size;
  container-name: inner;
}

/* 特定の名前のコンテナに対するクエリ */
@container outer (max-width: 500px) {
  .specific-child {
    /* スタイル定義 */
  }
}