Prisma sayscontain isolates an element’s layout/paint so changes inside don’t reflow the whole page.
contain: layout paint promises the browser an element's internals won't affect outside layout, letting it skip recalculating the rest of the page when that subtree changes. On big, component-heavy pages this is a real performance win. content is a handy shorthand value.
Power-ups you unlock
contain: layout | paint | size | style | content
Isolates a subtree from page-wide reflow
Big win on large, dynamic component trees
content = a sensible combined shorthand
Jank the Janitor attacks — common mistakes
contain:size without dimensions (collapses)
Applying where internals DO affect outside layout
Premature optimization on tiny pages
Boss battleAdd contain:content to a self-contained widget; reason about the reflow it prevents.