[ @sdxc/u/layout ]

contain

Applies contain, letting the browser skip layout and paint work it can prove stays inside the subtree.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { contain } from "@sdxc/u/layout";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.contain()`	`css({ contain: "content" })`
`u.contain("layout paint")`	`css({ contain: "layout paint" })`
`u.contain("strict")`	`css({ contain: "strict" })`
`u.contain("none")`	`css({ contain: "none" })`

Examples

Basic example

Use contain() to promise the browser an element's contents stay inside it; the element also becomes the box its fixed() and absolute() children position against:

fixed()

<div mix={[contain(), is(72), bs(32), ...]}>
	<div mix={[fixed(), insBottom(3), insRight(3), ...]}>fixed()</div>
</div>

Clipping with paint containment

Use contain("paint") to clip everything an element's descendants draw to its own box:

none

paint

<div mix={[...]}>
	<div mix={[relative(), contain("none"), is(40), bs(24), ...]}>
		<div mix={[absolute(), insTop(-4), insRight(-4), ...]}>none</div>
	</div>
	<div mix={[relative(), contain("paint"), is(40), bs(24), ...]}>
		<div mix={[absolute(), insTop(-4), insRight(-4), ...]}>paint</div>
	</div>
</div>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.contain())

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.contain())

Signature

u.contain(value?: ContainValue)