Container-type in depth
Learn container-type: inline-size and size values.
container-type: size for both axes
You have used container-type: inline-size so far; it opens only the horizontal axis. The size value opens both axes, so vertical conditions like @container (min-height: 240px) also work.
There is a cost: an element with size cannot derive its own height from content; the height must come from outside. Otherwise a loop forms: the height is both queried and changed by the query.
Most of the time inline-size is enough; reach for size only when you truly need a height query.
The cost of size
When you set container-type: size, the browser applies contain: size to the element. The element's size is then driven from outside, not from content; width and height no longer grow with content.
Practical effect: if you do not give the element a fixed height or place it in a parent grid track, its height collapses to zero. So put any size container inside a grid cell or a fixed-height wrapper.
Exercise Write a height query
Give the .banner selector container-type: size. Then, inside an @container (min-height: 240px) query, set padding: 32px on the .banner-in sub-selector. The banner shows less padding in a short container and more in a tall one.
Show example solution
/* banner open on both axes */
/* more padding in tall containers */
.banner {
container-type: size;
}
@container (min-height: 240px) {
.banner-in {
padding: 32px;
}
}Test yourself
-
Which value opens both axes to queries?
- container-type: size
- container-type: inline-size
- container-type: both
- container-type: width-height
Show answer
container-type: size — Correct. size opens both the horizontal and vertical axes together.
-
Write the value for a height query
.widget { container-type: ____; }Show answer
.widget { container-type: size; } -
Match the container-type values
- inline-size
- Measures horizontal axis
- size
- Measures both axes
- normal
- Closed to queries
- container-type
- Opens the container