container-type
==============

Baseline 2023
-------------

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

* Learn more
* See full compatibility
* Report feedback
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.

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`

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 color |

Formal syntax
-------------
```

container-type =   
  normal       |  
  size         |  
  inline-size    
  
```

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 Containment Module Level 3 # container-type |

Browser compatibility
---------------------

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

See also
--------

* CSS container queries
* `@container` at-rule
* CSS `container` shorthand property
* CSS `container-name` property
* CSS `content-visibility` property