cqi

Type that scales with its container

CaveatA cqi unit resolves against the nearest ancestor that declared a container, not the nearest ancestor you had in mind. Nest two containers and the inner one silently wins.

FallbackAlways wrap it in clamp(). Unbounded container units produce four-pixel type in a sidebar and headline type in a hero, from the same rule.

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

h2 {
  /* floor and ceiling are not optional */
  font-size: clamp(14px, 9cqi, 30px);
}

Published 7 Aug 2026