@container: adapting a component to its own space

In a few sentences

In brief

The condition may depend on the size of the container instead of the window.

Useful to know

@container applies styles when a suitable container fulfills a specified condition. In case of size requests, the shell must be prepared by container-type. [1]

Example: @container (min-width: 30rem) { .card { display: flex; } }. The card changes arrangement when it has enough space in its container. A wide screen alone does not guarantee performance: the component may be in a narrow panel. For a complex nested page, use container-name, to specify which container is being checked and to avoid dependence on a random shell.

Sources

For further detail and to check the information:

[1] MDN — @container ↗