Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

Inline-size containment

要素のインライン方向（通常は幅）のサイズ計算がコンテンツに依存しないことをブラウザに伝え、レイアウトの再計算範囲を限定します。コンテナクエリ（@container）の前提条件としても重要で、インラインサイズコンテインメントが設定された要素はコンテナクエリのターゲットとして使用できます。パフォーマンス最適化の重要な機能です。

コンテインメントパフォーマンス

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.contain.inline-size
105
105
101
16
105
16
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.container {
  contain: inline-size;
  container-type: inline-size;
}
@container (min-width: 400px) {
  .card { flex-direction: row; }
}

ライブデモ

basiccontainerkeri

CSS basiccontainerkeri demo.

プレビュー全画面表示

Narrow container

CSS Narrowcontainer demo.

プレビュー全画面表示

Wide container

CSS Widecontainer demo.

プレビュー全画面表示

実務での使いどころ

  • コンテナクエリの有効化

    contain: inline-size を設定することで、コンテナクエリが使用可能になり、親要素のサイズに応じたレスポンシブコンポーネントを作成できます。

注意点

  • インラインサイズコンテインメントを設定すると、要素は子要素のサイズに基づいて自動的に幅を調整しなくなります。明示的な幅の設定が必要になる場合があります。

アクセシビリティ

  • コンテインメントはパフォーマンス最適化とレイアウト制御のための機能であり、アクセシビリティに直接影響しません。

参考リンク