Container queries

Media queries operate their queries on the capabilities of the device. Practically, when working with responsive designs, it’s the width of the container we are typically interested in.

However, suppose we are creating a visual component that might be used in a wider container, such as a main content area, but equally might be used in a thinner, sidebar aside area. We tend to work around these scenarios without container queries by using descendant selectors to give some context and make style changes based on the document structure:

.component {
    display: flex;
}
.sidebar .thing {
    flex-direction: column;
}

Then, with this override for when the component is in the sidebar established, we can combine these selectors with media queries as needed. Maybe we need one set of styles when in the .sidebar and the screen is a certain size, and then another set of styles when not in the .sidebar but we are still at that viewport size:

@media ...