Why container queries stop matching when you switch container-type dynamically?

When a component flips classes at runtime, a container query can stop matching even when the DOM and sizes look fine. The root cause is often containment eligibility: the browser first finds an eligible container ancestor, then checks the axis or name your query uses. If the container’s container-type no longer supports the axis you ask for, there is simply no valid target and the query fails.

Implementation

Decide which axis your queries use. Width-based checks use the inline axis; height-based checks use the block axis. Use container-type: size when you need both axes, or container-type: inline-size when you only ever need inline-axis queries.
If you need to target a specific wrapper to avoid accidental matches, use container-name. Remember that naming preserves which container the browser will consider, but it does not add axis support.
When refactoring or toggling classes, inspect the container ancestor at the exact moment of the change: is there still a qualifying container, does it have the expected name (if you rely on names), and does it support the axis you query?

Expected behavior

With container-type: size, both inline (width) and block (height) queries can match the same container.
With container-type: inline-size, inline-axis queries continue to work but block-axis queries will report no eligible container.
Name-only queries can still resolve a named container regardless of axis, but axis-based checks still require the appropriate container-type.

Limitations

This diagnosis demonstrates container eligibility logic. It does not replace checking your real page for selector specificity, layout overrides, or browser rendering differences.
If a query fails because the container is too small, or because the element moved to a different ancestor chain, the correct fix is not always changing container-type.

The article includes a compact deterministic fixture that reproduces the toggle, shows the failing state, and demonstrates both repairs: keep an appropriate container-type for axis queries or use container naming for targeting problems. Use the fixture’s diagnostics to separate container discovery issues from axis-eligibility problems.

Working example

export function createElement({ tag = 'div', width = 0, height = 0 } = {}) { return { tag, width, height, parent: null, children: [], containerType: 'normal', containerName: undefined, }; } export function appendChild(parent, child) { child.parent = parent; parent.children.push(child); } export function setContainerType(el, type) { el.containerType = type; } export function setContainerName(el, name) { el.containerName = name; } export function toggleContainerType(el, nextType) { setContainerType(el, nextType); } function compare(op, left, right) { switch (op) { case '>': return left > right; case '>=': return left >= right; case '<': return left < right; case '<=': return left <= right; default: throw new Error(`unsupported compare operator: ${op}`); } } function queryAxis(query) { if (query.kind === 'name-only') return null; if (query.axis) return query.axis; if (query.feature === 'width') return 'inline'; if (query.feature === 'height') return 'block'; return null; } export function findEligibleContainer(startEl, query) { let node = startEl.parent; const axis = queryAxis(query); while (node) { if (query.kind === 'name-only') { if (node.containerName === query.name) return node; } else if (axis) { if (node.containerType === 'size') return node; if (node.containerType === 'inline-size' && axis === 'inline') return node; } node = node.parent; } return null; } export function evaluateQuery(targetEl, query) { const container = findEligibleContainer(targetEl, query); if (!container) { return { matched: false, reason: 'no-eligible-container', container: null }; } if (query.kind === 'name-only') { return { matched: true, container }; } const axis = queryAxis(query); const size = axis === 'inline' ? container.width : container.height; return { matched: compare(query.compare, size, query.value), container, containerValue: size, }; }