CSS contain property for rendering performance isolation

Complex or frequently updated DOM sections cause expensive full-page layout recalculations and repaints, degrading performance.

Use the contain property to isolate a subtree from the rest of the page's layout and paint calculations:

/* layout: element's size won't affect siblings */
/* paint: element won't paint outside its bounds */
/* style: CSS counters/quotes don't leak out */

.card {
  contain: layout paint; /* most common combination */
}

/* contain: content is shorthand for layout paint style */
.widget {
  contain: content;
}

/* contain: strict also adds size containment */
.isolated-panel {
  contain: strict;
  width: 400px;
  height: 300px; /* size must be explicit with strict */
}

Without containment, any change inside an element may trigger a layout recalculation for the entire page. contain tells the browser that the element is independent, so it can skip global recalculations and limit paint regions.

Large lists, dashboards, or frequently updating components where layout thrashing is a concern.