Height-Based Container Query with container-type: size

Height-Based Container Queries

While most container queries are width-based, sometimes you need to query the container's height. This requires container-type: size instead of inline-size.

The CSS

.hero-panel {
  container-type: size;
  container-name: hero;
  height: 100vh; /* Explicit height required! */
}

@container hero (min-height: 500px) {
  .hero-content {
    padding: 4rem;
    font-size: 1.5rem;
  }
}

@container hero (max-height: 400px) {
  .hero-content {
    padding: 1rem;
    font-size: 1rem;
  }
  .hero-subtitle {
    display: none;
  }
}

Critical Requirement: Explicit Height

container-type: size establishes size containment in both dimensions. This means the element's height cannot be determined by its content. You must provide height through:

• An explicit height or min-height value
• A parent layout (flexbox/grid) that constrains the height
• 100vh, 100dvh, or another viewport-relative unit

Without Explicit Height

/* BROKEN: height collapses to 0 */
.container {
  container-type: size;
  /* No height set -- content has no effect on height */
}

Combining Width and Height

@container hero (min-width: 800px) and (min-height: 500px) {
  .hero-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

This query fires only when the container is both wide and tall enough for a side-by-side hero layout.