---
title: "Fence off self-contained parts · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/performance/css-containment
updated: 2026-10-20
licence: "All rights reserved"
---

# Fence off self-contained parts

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Optional
- Chapter: [Performance](https://agentwranglers.se/playbook/website/performance)
- Rule: Use `contain` on self-contained parts of the page, so the browser can limit layout and paint work.
- How: Add `contain: content` to self-contained cards and widgets. Never add it around fixed elements or menus that spill out, because it clips overflow.
- Check: A performance trace shows less layout and paint time than without the rule, and no card clips a menu or focus ring.

Example:

```css
.card, .widget { contain: content; }
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/performance/css-containment`.

- Previous: [Skip work for what is off screen](https://agentwranglers.se/playbook/website/performance/visibility-aware-rendering)
- Next: [Use shared dictionaries for big bundles](https://agentwranglers.se/playbook/website/performance/compression-dictionary-transport)
- [Performance](https://agentwranglers.se/playbook/website/performance)