# overflow

> Applies `overflow: clip`, the modern alternative to `overflow: hidden`.

```ts
import { clip } from "@sdxc/u/overflow";
```

Applies `overflow: clip`, the modern alternative to `overflow: hidden`.
Overflow stays permanently unreachable: user input, programmatic scrolling,
and focusing a clipped descendant all leave the element unscrolled.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.clip()` | `css({ overflow: "clip" })` |

## Examples

### Basic example

Use `clip()` to cut off any content that overflows an element, with no way to scroll to it, not even from script:

```tsx
<div mix={[clip(), is(64), bs(32), ...]}>
	<div mix={[is(96), bs(48), ...]} />
</div>
```

### Clipping media to rounded corners

Add `clip()` to a rounded card so the image at its edge follows its corners:

```tsx
<article mix={[clip(), rounded("xl"), is(64), border({ color: "neutral.border", width: 1 })]}>
	<img src={...} alt="" mix={[is("100%"), bs(32), fit()]} />
	<p mix={[p(4), ...]}>Mountain lake at noon</p>
</article>
```

## Applying on a state

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

```ts
u.hover(u.clip())
```

## Responsive design

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

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

## Signature

```ts
u.clip()
```