# overflow-y

> Applies `overflow-y`, independently of the inline axis.

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

Applies `overflow-y`, independently of the inline axis.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.overflowY("auto")` | `css({ overflowY: "auto" })` |

## Examples

### Basic example

Use `overflowY("auto")` to let an element scroll vertically when its content is taller than it is. Scroll the box:

```tsx
<div mix={[overflowY("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 `overflowY("scroll")` to always show a vertical scrollbar, where the operating system draws one, even when the content fits:

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

### Clipping vertically

Call `overflowY()`, which applies `hidden`, to clip content that is taller than its element:

```tsx
<div mix={[overflowY(), 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>
```

## Applying on a state

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

```ts
u.hover(u.overflowY("auto"))
```

## Responsive design

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

```ts
u.at("md", u.overflowY("auto"))
```

## Signature

```ts
u.overflowY(value?: OverflowValue)
```