# overflow

> Applies `overflow`, defaulting to `"hidden"`.

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

Applies `overflow`, defaulting to `"hidden"`. An axis object sets only the
axes it names and leaves the rest untouched; prefer its `inline`/`block`
keys over `x`/`y` to stay correct under RTL and vertical writing modes.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.overflow()` | `css({ overflow: "hidden" })` |
| `u.overflow({ x: "auto" })` | `css({ overflowX: "auto" })` |
| `u.overflow({ inline: "auto" })` | `css({ overflowInline: "auto" })` |

## Examples

### Basic example

Use `overflow()`, which applies `hidden`, to clip any content that overflows the bounds of an element:

```tsx
<div mix={[overflow(), bs(24), is(72), maxIs("100%"), ...]}>
	<p mix={[...]}>
		This paragraph is taller than its box, so the last lines of it do not fit. Scroll to read
		the rest, while the page around the box stays exactly where it is.
	</p>
</div>
```

### Showing content that overflows

Use `overflow("visible")` to let content that does not fit draw past the edge of its element:

```tsx
<div mix={[overflow("visible"), bs(16), is(72), maxIs("100%"), mbe(20), ...]}>
	<p mix={[...]}>
		This paragraph is taller than its box, so the last lines of it do not fit. Scroll to read
		the rest, while the page around the box stays exactly where it is.
	</p>
</div>
```

### Scrolling if needed

Use `overflow("auto")` to make an element scrollable when its content overflows, with scrollbars shown only when they are needed. Scroll the box:

```tsx
<div mix={[overflow("auto"), bs(24), is(72), maxIs("100%"), ...]}>
	<p mix={[...]}>
		This paragraph is taller than its box, so the last lines of it do not fit. Scroll to read
		the rest, while the page around the box stays exactly where it is.
	</p>
</div>
```

### Scrolling always

Use `overflow("scroll")` to make an element scrollable and always show its scrollbars, where the operating system draws them, even when the content fits:

```tsx
<div mix={[overflow("scroll"), bs(24), is(64), ...]}>
	<p mix={[...]}>This short text fits.</p>
</div>
```

### Setting each axis

Pass an object to set only the axes it names, like `overflow({ inline: "auto", block: "hidden" })`. Prefer `inline` and `block` over `x` and `y` so the layout holds under right-to-left and vertical writing modes:

```tsx
<div
	mix={[
		overflow({ inline: "auto", block: "hidden" }),
		hstack({ gap: 4 }),
		is(96),
		maxIs("100%"),
		p(4),
		...,
	]}
>
	<div mix={[shrink(), is(24), ...]}>1</div>
	<div mix={[shrink(), is(24), ...]}>2</div>
	<div mix={[shrink(), is(24), ...]}>3</div>
	<div mix={[shrink(), is(24), ...]}>4</div>
	<div mix={[shrink(), is(24), ...]}>5</div>
</div>
```

## Applying on a state

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

```ts
u.hover(u.overflow())
```

## Responsive design

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

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

## Signature

```ts
u.overflow(value?: | OverflowValue
		| {
				x?: OverflowValue;
				y?: OverflowValue;
				inline?: OverflowValue;
				block?: OverflowValue;
		  })
```