2026-09-08 · 6 min read · Rahul Chitturi
- css
- responsive-design
- debugging
A container query responds to an ancestor container rather than the viewport. A rule can be valid and visible in source while selecting a different ancestor, measuring an unavailable axis, or losing in the cascade.
Adding a media query may hide the symptom but changes the component contract and can fail when the component appears in a sidebar, modal, or embedded layout.
Identify the queried container
Inspect the element and walk through eligible ancestors. Record container-type, container-name, writing mode, rendered dimensions, query condition, and the rule's support status in the target browser.
- Confirm the container is an ancestor, not the element itself
- Check spelling and case of named containers
- Use the inline or block axis intended by the design
- Look for size constraints that prevent the container from changing
Separate query matching from cascade
Developer tools may show that a query matches while another selector, cascade layer, inline style, or important declaration wins. Compare computed values and rule order after confirming the condition.
Containment can affect intrinsic sizing and layout. Apply it at a stable component boundary, and provide a usable base style for browsers or rendering contexts that do not support the query feature.
A Flashman workflow
Use the CSS formatter to expose container declarations, units converter for breakpoint values, diff for computed-style evidence, color tool for responsive contrast, and HTML entities tool for safe reduced fixtures.
Test below, at, and above each boundary, nested and named containers, vertical writing, zoom, long content, grid and flex sizing, browser support fallbacks, printing, and server-rendered layouts.