📦 CSS contain — Complete Tutorial

The CSS contain property tells the browser that an element is **independent** from the rest of the page. This allows the browser to optimize painting, layout, style calculation, and size calculations. It improves performance, especially in large or complex UI layouts.

>>“contain lets you isolate parts of the page — making rendering faster and more efficient.”

Note

✔ Helps with performance
✔ Prevents expensive layout recalculations
✔ Useful for components, widgets, modals, infinite lists

📦 Syntax

Syntax

contain: 
  size | layout | style | paint | content | strict | none;

/* Multiple values */
contain: layout paint;
contain: size style;
contain: content;      /* shorthand for layout + style + paint */

📌 Values Explained

ValueDescription
sizePrevents size of element from depending on children.
layoutRestricts internal layout from affecting outside layout.
styleStyles inside do not affect external elements (e.g., counters).
paintPrevents content from painting outside its bounds.
contentShorthand for layout + style + paint.
strictApplies ALL types of containment (best isolation).
noneNo containment (default).

🎨 1. Basic Example

Basic contain

.card {
  contain: layout paint;
}

The card’s layout and painting are isolated from the rest of the page.

🎨 2. Using contain: size

size containment

.widget {
  contain: size;
  height: 200px; /* must define a size */
}

Prevents the widget’s children from affecting the widget’s size.

Note

Size containment requires a fixed size — no auto size allowed.

🎨 3. Using contain: content

content shorthand

.modal {
  contain: content;
}

Equivalent to: layout + style + paint. Ideally used for fully isolated components.

🎨 4. Using contain: strict

strict containment

.component {
  contain: strict;
}

Enables all forms of containment → maximum performance isolation.

🎨 5. Prevent overflowing painting

paint containment

.gallery {
  contain: paint;
}

Prevents children from drawing outside the container box.

📌 Visual Breakdown

ValueWhat It Prevents
layoutInternal layout affecting ancestors
paintOverflow painting outside box
styleCounters, quotes, list styles leaking out
sizeSize recalculation from children

🧪 Real-World Use Cases

1️⃣ Reusable UI Components

component example

.card {
  contain: content;
}

Best for isolated cards, widgets, product components.

2️⃣ Infinite Scrolling Layouts

infinite list

.list-item {
  contain: layout;
}

Prevents deep layout recalculations when adding or removing items.

3️⃣ Web Apps with Many Panels

panels

.panel {
  contain: strict;
}

Boosts performance in dashboards, editors, and admin UIs.

⚠️ Common Mistakes

  • ❌ Using size without defining width/height
  • ❌ Expecting contain to fix overflow clipping (use overflow)
  • ❌ Applying strict to everything — may break layout
  • ❌ Forgetting that containment isolates counters and styles

Note

Start with layout or content — avoid strict unless necessary.

🔥 Summary

contain is a powerful performance tool that isolates layout, painting, size, and style effects. Used wisely, it makes complex UIs smoother and prevents costly reflows.

  • contain: layout → layout isolation
  • contain: paint → no painting overflow
  • contain: content → full containment (layout + style + paint)
  • contain: strict → maximum isolation
>>“Fast UIs aren’t accidental — they’re engineered. Containment is one of the tools that make them smooth.”