contain

Values

• none: no containment. This is the initial value.
• size: the box is sized as if it had no contents. A box without a set height shrinks even though it has contents.
• inline-size: the same as size, but only along the line direction (the width in horizontal writing). It cannot be combined with size.
• layout: isolates the layout inside. Floats and margins inside no longer reach outside, and position: absolute and position: fixed elements inside are placed relative to this box.
• style: keeps counters such as counter-increment and quote nesting from affecting anything outside the box.
• paint: clips the contents at the outer edge of the padding (the overflow clip edge). As with overflow: clip, anything that overflows is no longer visible.
• strict: the same as size layout style paint.
• content: the same as layout style paint, so everything but size.

Reading the preview

The preview on this page uses helper declarations, overflow: visible and height: auto, so that overflowing contents stay visible and the box height follows its contents. The long URL on the first line sticks out on the right. With paint, the URL is clipped. With size, the box shrinks and the text hangs out below it. With strict, both happen and almost nothing of the shrunken box's contents is visible.

inline-size changes nothing in this preview, because the box width is set to 240px. On a box whose width comes from its contents (such as display: inline-block or a float), the width shrinks as if it had no contents.

When to use it

• Put contain: content on self-contained widgets or on each item of a long list, so that a change inside only makes the browser redo that part.
• container-type for container queries uses size or inline-size containment internally, so that the container width does not depend on contents that in turn ask for that width.

Watch out

• layout and paint also create a stacking context. z-index values inside no longer compete with elements outside the box.
• A layout box is treated as having no baseline, so its position changes when it is aligned to the baseline in a line.
• size and paint do not apply to table rows or to display: inline elements. size does not apply to table cells or to the table itself either, but paint does apply to cells.
• Works in all major browsers. style arrived in Firefox 103 and Safari 27.