CSS Container Queries: Browser Support, Features, Limits

What is CSS container queries?

CSS container queries are a CSS Containment Module Level 3 feature from the W3C CSS Working Group. They use the @container at-rule and the container-type and container-name properties to style child elements based on the size or computed style of a parent container, so one component can adapt to many layout slots without checking the viewport.

Which browsers does CSS container queries support?

CSS container queries work in every modern desktop and mobile browser, with Chrome and Edge first in version 105, Safari in version 16, and Firefox in version 110.

What are the key features of CSS container queries?

CSS container queries cover three query types and six length units, all driven by the @container at-rule and the container-type property.

• Size queries: Match a parent container's width or height with rules like @container (width > 480px) or @container card (max-width: 320px). Size queries are the most widely supported variant and ship in every browser that supports @container.
• Style queries: Match a parent container's computed style, currently limited to CSS custom properties in Chrome 111+, Edge 111+, Opera 97+, and Safari 18+. Firefox does not yet support style queries.
• Scroll-state queries: Match scroll position and stuck states, available in Chrome 133+ and Edge 133+. Safari, Firefox, and Samsung Internet have not shipped scroll-state queries.
• Container query length units: Six relative units, cqw, cqh, cqi, cqb, cqmin, and cqmax, each measuring 1 percent of the query container's width, height, inline size, block size, smaller axis, or larger axis.
• container-type property: Declares an element a query container with the values inline-size (recommended default), size (both axes), or normal (style queries only).
• container-name property: Names a container so a child can target a specific ancestor with @container sidebar (width > 700px), instead of always falling back to the closest container.
• container shorthand: Sets container-name and container-type in one declaration, written as container: card / inline-size on the parent element.

How do you use CSS container queries?

Container queries take three steps: declare a container on the parent, name it if a child needs a specific target, and write @container rules that change child styles when the container matches a condition.

• Declare a container: Set container-type: inline-size on the parent element. inline-size is the safer default; size also adds block-axis containment but can collapse children that have no fixed height.
• Name the container (optional): Set container-name: card on the parent so a child can target this specific ancestor with @container card (...), instead of always querying the closest container.
• Write the @container rule: Open @container card (width > 480px) and put any child selector and properties inside the block. The rule fires only when the named container matches.
• Use container query units when sizing children: Replace vw or vh with cqw, cqh, cqi, or cqb so font-size, padding, and gaps scale with the container, not the viewport.
• Test with DevTools: Open the Elements panel in Chrome 105+ or Safari 16+, click the container badge next to the parent, and resize to confirm the @container rule fires at the right breakpoint.

/* Step 1: Declare a containment context on the parent */
.card-grid {
  container-type: inline-size;
  container-name: card;
}

/* Step 2: Query the named container by width */
@container card (width > 480px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
  }
}

/* Step 3: Use container query units for fluid sizing */
@container card (width > 320px) {
  .card h2 {
    font-size: clamp(1.25rem, 4cqi, 2rem);
  }
}

If the rule never fires, container-type is most likely missing on the parent or set on the wrong ancestor; the closest ancestor with container-type wins, so check the cascade in DevTools.

What are the known issues with CSS container queries?

CSS container queries work cleanly across modern browsers, but the spec design has a few sharp edges that catch teams the first time they ship them.

• A container cannot style itself: @container rules apply only to descendants. The container's own size and style cannot depend on its own queried conditions, since container-type triggers layout containment and would create a circular dependency.
• Containers lose intrinsic sizing: container-type: size or inline-size forces explicit sizing on the container. An unsized container inside a flex or grid layout can collapse to zero width, especially when the parent uses align-items: stretch or grid-auto-rows: min-content.
• Style queries are still narrow: Chrome 111+, Edge 111+, and Safari 18+ accept style queries on CSS custom properties only, and Firefox has not shipped any style query support. Style queries on standard properties like color or display remain experimental.
• Reserved container names: container-name cannot use the reserved keywords default, none, at, no, or, or any other CSS-wide identifier. Pick names like card, sidebar, or hero to avoid parser errors.
• Specificity is unchanged inside @container: A rule inside @container has the same specificity as the same rule outside, so an outer .card { color: red } can still beat @container (width > 400px) { .card { color: blue } } if source order or specificity is wrong.
• No fallback inside @container: Browsers without container query support skip the entire @container block, so any layout the block sets is lost. Provide a media-query baseline outside the @container so older browsers still get a usable layout.

In my experience, the container-type sizing trap catches teams the most. A card that was happy in a flex layout collapses to zero width the moment you add container-type: inline-size to a flex item, because the parent stops sizing it from content. The fix is usually flex-basis: auto plus min-width: 0 on the container, or moving container-type onto a wrapper that already has explicit width.

Citations

All CSS container queries version numbers and platform notes in this guide come from these primary sources:

• W3C - CSS Containment Module Level 3: w3.org/TR/css-contain-3
• MDN Web Docs - CSS container queries: developer.mozilla.org/en-US/docs/Web/CSS/Guides/Containment/Container_queries
• MDN Web Docs - @container at-rule: developer.mozilla.org/en-US/docs/Web/CSS/@container
• MDN Web Docs - Getting started with CSS container queries: developer.mozilla.org/en-US/blog/getting-started-with-css-container-queries
• Chrome for Developers - Container queries land in stable browsers: web.dev/blog/cq-stable
• web.dev - Container queries learn: web.dev/learn/css/container-queries
• WebKit - CSS Container Queries in Safari 16: webkit.org/blog/13152/css-container-queries-in-safari-16
• Apple Developer - Safari 16 Release Notes: developer.apple.com/documentation/safari-release-notes/safari-16-release-notes
• Mozilla - Firefox 110 Release Notes: mozilla.org/en-US/firefox/110.0/releasenotes
• Chrome Platform Status - CSS Container Queries: chromestatus.com/feature/5031719352270848