container-type: inline-size vs size — When to Use Each

inline-size vs size Container Types

The container-type property determines which dimensions a container exposes for querying. Choosing the right type is critical for both functionality and performance.

inline-size (Most Common)

.container {
  container-type: inline-size;
}

Establishes inline-size containment only. In horizontal writing modes, this means the container's width can be queried but not its height. The browser does not need to resolve the element's height independently of its content.

size (Both Dimensions)

.container {
  container-type: size;
}

Establishes containment on both inline and block dimensions. The container's width and height can be queried. However, the element must have a deterministic size -- it cannot rely on its content to determine its dimensions.

When to Use inline-size

• ✅ You only need width-based queries (the vast majority of use cases)
• ✅ The container's height is determined by its content
• ✅ You want minimal layout impact

When to Use size

• ✅ You need to query the container's height (e.g., min-height: 300px)
• ✅ The container has an explicit height set (via CSS or a parent constraint)
• ⚠️ Be careful: the element's height is no longer determined by its content

Common Pitfall with size

/* PROBLEM: height collapses to 0 */
.container {
  container-type: size;
  /* No explicit height set! */
}

Since container-type: size establishes size containment in both dimensions, the element's height cannot depend on its content. You must set an explicit height or use a layout mechanism (like flexbox/grid) that provides one.