The most common container query mistakes. Each one starts in its broken state — flip to "Fixed" to see the correct version and explanation.
You set container-type on an element and try to use @container to style that same element. It never fires.
@container rules are written but the parent has no container-type. The styles silently never apply.
container-type: inline-size only constrains the inline axis. Using cqh (container query height) returns 0.
Applying container-type: size to an element whose height is determined by its content causes it to collapse to zero height.
A named @container query skips any unnamed containers and finds the nearest ancestor matching the name — even if that means skipping a closer unnamed container.
An element with display: contents cannot establish a containment context, even with container-type set.
