What is CSS containment and the contain property?

CSS containment lets you isolate a subtree of the page from the rest of the document, enabling browser performance optimizations. The contain property takes values: layout: the element's internal layout does not affect the rest of the page (no layout escape). paint: the element's descendants are not drawn outside its borders. size: the element's size does not depend on its children. style: scopes counter and quote properties. content is shorthand for layout + paint. strict is shorthand for layout + paint + size. Container queries require contain: layout or inline-size. Containment helps browsers avoid recalculating layout or repainting the entire page when a contained component changes.