container-type: inline-size vs size — 使い分けガイド

inline-size vs size コンテナタイプ

container-typeプロパティは、コンテナがクエリに公開するディメンションを決定します。適切なタイプの選択は機能とパフォーマンスの両方にとって重要です。

inline-size（最も一般的）

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

インラインサイズの包含のみを確立します。水平書字モードでは、コンテナの幅はクエリできますが高さはできません。ブラウザはコンテンツとは独立して要素の高さを解決する必要がありません。

size（両方のディメンション）

.container {
  container-type: size;
}

インラインとブロックの両方のディメンションで包含を確立します。コンテナの幅と高さをクエリできます。ただし、要素はコンテンツに依存せずにサイズが決定できる必要があります。

inline-sizeを使用する場合

• ✅ 幅ベースのクエリのみが必要（大多数のユースケース）
• ✅ コンテナの高さがコンテンツによって決まる
• ✅ レイアウトへの影響を最小限にしたい

sizeを使用する場合

• ✅ コンテナの高さをクエリする必要がある（例：min-height: 300px）
• ✅ コンテナに明示的な高さが設定されている
• ⚠️ 要素の高さはコンテンツによって決まらなくなることに注意

sizeでの一般的な落とし穴

/* 問題：高さが0に崩壊する */
.container {
  container-type: size;
  /* 明示的な高さが設定されていない！ */
}

container-type: sizeは両方のディメンションでサイズ包含を確立するため、要素の高さはコンテンツに依存できません。明示的な高さを設定するか、高さを提供するレイアウトメカニズム（flexbox/gridなど）を使用する必要があります。