Container Queries for Components in Resizable Panels

An order table fits a full page but breaks in a sidebar. The window has not changed width. The component needs to respond to the space its container received.

A viewport is not a physical screen

@media (min-width: 768px) tests viewport width. It does not identify a device or measure its physical screen resolution. Resizing the browser changes the value a width query tests.

The mismatch appears when viewport width is used as a substitute for component space. A card in a sidebar and a full-page card need different layouts inside the same window. Multitasking and foldable phones add further contexts worth testing.

Query the container for its descendants

A container size query applies styles to a descendant using an eligible ancestor's dimensions. This example declares a panel and switches the table's display according to its width.

.panel {
  container-type: inline-size;
  container-name: panel;
}

@container panel (min-width: 40rem) {
  .order-table {
    display: table;
  }
}

@container panel (max-width: 40rem) {
  .order-table {
    display: block;
  }
}

This illustrates layout selection rather than a complete accessible table. Test headers, data reading and controls in the narrow version of the real component.

Grid and flex items can be containers

A grid or flex item can act as a query container for its descendants. What matters is how its size is established. container-type: inline-size changes intrinsic sizing, so inspect layouts whose width depends on their content. There is no general prohibition on grid items and no requirement to give every container a fixed width.

A size query selects an eligible ancestor rather than styling an element according to its own size. An existing parent may be enough. Sometimes a wrapper is useful.

Check size-query support separately from style queries and newer features. The CSS working draft describes developing features, not universal browser support. Apply the same caution to variables in query conditions.

Keep media queries where they fit

Page layout and navigation can still follow the viewport. Input capabilities are a separate question, for example through pointer. Width alone cannot establish whether someone uses touch or a mouse. Printing needs its own rules too.

Try one reused component first

Place it in a full page and a narrow panel. Test resizing, longer content and enlarged text. Decide which rules belong to the viewport and which belong to the container.

The effort depends on the component's structure and tests. Scope that work during software modernization after the trial rather than promising an afternoon. Our ten points for a usable site cover the surrounding concerns.