# contain

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

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

Applies `contain`, letting the browser skip layout and paint work it can
prove stays inside the subtree. Defaults to `"content"`; every value beyond
`"none"` makes the element a containing block and a stacking context.

## 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:

```tsx
<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:

```tsx
<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.

```ts
u.hover(u.contain())
```

## Responsive design

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

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

## Signature

```ts
u.contain(value?: ContainValue)
```