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

Next lesson: Container-name

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies