[ @sdxc/u/overflow ]

overflow-block

Applies overflow-block, independently of the inline axis.

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

import { overflowBlock } from "@sdxc/u/overflow";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.overflowBlock("auto")`	`css({ overflowBlock: "auto" })`

Examples

Basic example

Use overflowBlock("auto") to let an element scroll along the block axis, vertically in a horizontal writing mode, when its content does not fit. Scroll the box:

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.

<div mix={[overflowBlock("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>

Clipping the block axis

Call overflowBlock(), which applies hidden, to clip content that overflows along the block axis:

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.

<div mix={[overflowBlock(), 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.

u.hover(u.overflowBlock("auto"))

Responsive design

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

u.at("md", u.overflowBlock("auto"))

Signature

u.overflowBlock(value?: OverflowValue)