Say Hello to CSS Container Queries

Container Queries Land in Chrome Canary

CSS container queries have taken a major step toward reality. The feature is now available behind a flag in the latest version of Chrome Canary, giving developers a chance to experiment with a long-awaited capability: styling elements based on the size of their parent container, rather than the viewport.

The feature requires two pieces. First, you declare that a parent component should act as a containment context using container: layout inline-size. Then you write a new kind of query, @container, which responds to width changes in that parent element instead of the browser window.

.parent {
  container: layout inline-size;
}

@container (min-width: 400px) {
  .child {
    display: flex;
    flex-wrap: wrap;
  }
}

This distinction matters. A component embedded in a sidebar, a card grid, or a flexible layout has no reliable way to know its own width from a media query alone. Container queries solve that by tying style changes directly to the element that wraps the content.

What Developers Have Been Waiting For

The feature has been a long time coming, and front-end developers have been vocal about why it matters. Ahmad Shadeed, who first detailed many of the practical use cases, described the Chrome Canary prototype as a breakthrough after years of waiting for CSS to catch up with component-based design.

Typography is one area where the feature is particularly useful. Andy Bell has argued that responsive type should be set contextually, not just in response to the viewport. With media queries, you can adjust font sizes when the browser window changes width, but that approach falls apart when you don't know where a component will be placed. Container queries allow type to respond to the actual space an element occupies, making design system implementations significantly simpler.

How the Feature Came Together

The path to this point is documented in Miriam Suzanne's explainer, which covers the design decisions and the many edge cases that surfaced during the proposal process. The public development of the feature is a useful case study in how CSS evolves and improves with community input.

For many developers, this represents the most significant change to CSS since Grid. The problems it solves are not exotic. Adjusting an element's typography or layout based on the width of its wrapper is a common need that previously required JavaScript workarounds or complex CSS hacks. Container queries remove that friction and make scoped, context-aware styling a first-class capability.