css/container-type-size

Why

container-type: size applies size containment in both directions, so the element no longer grows with its content: without a height of its own it collapses to zero and its children overflow or vanish. Most component queries only need the width.

Fix

Use container-type: inline-size (or container: name / inline-size) to query width. Keep size for an element whose height is set independently (block-size, aspect-ratio, a grid track) when you really need height queries.

Examples

/* bad */
.card-list { container-type: size; }
/* good */
.card-list { container-type: inline-size; }
@container (width > 40rem) { .card { display: grid; grid-template-columns: 1fr 2fr; } }

Sources

• MDN, container-type
• MDN, CSS container queries

Read it in the terminal

npx github:dawidolko/frontend-skills explain css/container-type-size