container-type

Baseline 2023

Newly available

Since February 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

An element can be established as a query container for container size queries using the container-type CSS property. container-type is used to define the type of size containment used in a container query.

Size containment turns off the ability of an element to get size information from its contents, which is important for container queries to avoid infinite loops. If this were not the case, a CSS rule inside a container query could change the content size, which in turn could make the query evaluate to false and change the parent element's size, which in turn could change the content size and flip the query back to true, and so on.

The container size has to be set explicitly or by context — for example, block elements, flex containers, and grid containers stretching to the full width of their parent. If an explicit or contextual size is not available, elements with size containment will collapse.

Note: When using the container-type and container-name properties, the style and layout values of the contain property are automatically applied.

Syntax

css

/* Keyword values */
container-type: normal;
container-type: size;
container-type: inline-size;

/* Global Values */
container-type: inherit;
container-type: initial;
container-type: revert;
container-type: revert-layer;
container-type: unset;

Values

size

Establishes a query container for container size queries in both the inline and block dimensions. Applies layout containment, style containment, and size containment to the container.

Size containment is applied to the element in both the inline and block directions. The size of the element can be computed in isolation, ignoring the child elements.

inline-size

Establishes a query container for dimensional queries on the inline axis of the container. Applies layout, style, and inline-size containment to the element.

Inline size containment is applied to the element. The inline size of the element can be computed in isolation, ignoring the child elements.

normal

Default value. The element is not a query container for any container size queries, but remains a query container for container style queries.

Formal definition

Initial value	`normal`
Applies to	all elements
Inherited	no
Computed value	as specified
Animation type	a CSS data type are interpolated on each of their red, green, blue components, each handled as a real, floating-point number. Note that interpolation of colors happens in the alpha-premultiplied sRGBA color space to prevent unexpected grey colors to appear.">color

Formal syntax

container-type = 
  normal                                      |
  [ [ size | inline-size ] || scroll-state ]

Examples

Establishing inline size containment

Given the following HTML example which is a card component with an image, a title, and some text:

html

<div class="container">
  <div class="card">
    <h3>Normal card</h3>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

<div class="container wide">
  <div class="card">
    <h3>Wider card</h3>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

To create a container context, add the container-type property to an element. The following uses the inline-size value to create a containment context for the inline axis of the container:

css

.container {
  container-type: inline-size;
  width: 300px;
  height: 120px;
}

.wide {
  width: 500px;
}

h3 {
  height: 2rem;
  margin: 0.5rem;
}

.card {
  height: 100%;
}

.content {
  background-color: wheat;
  height: 100%;
}

.container {
  margin: 1rem;
  border: 2px dashed red;
  overflow: hidden;
}

Writing a container query via the @container at-rule will apply styles to the elements of the container when it is wider than 400px:

css

@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

Specifications

Specification
CSS Conditional Rules Module Level 5 # container-type

Browser compatibility

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.