Inspect the working example
The host is 280px wide and is an inline-size container. Its child changes to two columns only when that host reaches 400px. A 960px viewport alone does not meet the component condition.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| Narrow host | Viewport 960; host 280 | One column |
| Wide host | Same viewport; host 500 | Two columns |
| Query target | Inspect the eligible ancestor | host, not the viewport |
Follow the browser mechanism
A size container query resolves against an eligible ancestor container. The queried element is inside the host; it does not query its own width. Changing the host width can change layout without changing the window. Support is verified in the declared engines, not assumed from the source alone.
A viewport query switches the wrong condition
The alternative uses a viewport media query for the same 280px host.
<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>Source text</p><p>Rendered text</p></section></section>At a 960px viewport it uses two columns despite the host remaining 280px.
Try the repair
The viewport stays 960px. What changes when host width rises from 280px to 500px in the working example?
Show the worked answer
The host crosses the 400px container condition, so its inner content changes from one column to two.
- Record host width and viewport width as separate observations.
- Require actual support and measured child positions.