先看這個例子
host 闊 280px，設為 inline-size 容器。內層只在 host 達 400px 才轉兩欄。視窗本身有 960px，並不代表元件條件已滿足。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 窄容器 | 視窗 960；host 280 | 一欄 |
| 闊容器 | 視窗不變；host 500 | 兩欄 |
| 判斷對象 | 查看符合條件的上層容器 | 是 host，不是視窗 |
瀏覽器怎樣處理
尺寸 container query 按符合條件的上層容器判斷。要轉版的元素在 host 裏面，不是查自己的闊度。host 改闊，視窗不變，也可以令配置改變。支援情況須按所記錄引擎核對，不能只憑原始碼推定。
視窗條件會錯用另一個闊度
反例對同一個 280px host，改用視窗 media query。
<style>body{margin:8px}</style>
<style>.host{width:280px}.inner{display:grid;gap:8px}@media(min-width:400px){.inner{grid-template-columns:1fr 1fr}}</style><section class="host"><section class="inner"><p>原始文字</p><p>顯示結果</p></section></section>視窗 960px 時已轉兩欄，即使 host 仍只有 280px。
試着修正
視窗維持 960px，正例 host 從 280px 改成 500px，會改變甚麼？
查看參考答案
host 跨過 400px 容器條件，內層由一欄轉兩欄。
- host 和視窗闊度分開記。
- 核對真正支援及子元素位置。