Overflow

Control content overflow and scrolling behavior

Properties

Visible

Utility class	Description	Example
.overflow-visible	Content is not clipped and renders outside the element's boundaries on both axes.
.overflow-x-visible	Allows content to spill out horizontally while following the default or specified behavior vertically.
.overflow-y-visible	Allows content to spill out vertically while following the default or specified behavior horizontally.

Hidden

Utility class	Description	Example
.overflow-hidden	Clips any content that extends beyond the container's boundaries; scrollbars are not provided.
.overflow-x-hidden	Clips content horizontally, preventing horizontal scrolling.
.overflow-y-hidden	Clips content vertically, preventing vertical scrolling.

Scroll

Utility class	Description	Example
.overflow-scroll	Adds scrollbars to the element on both axes, regardless of whether the content exceeds the container's size.
.overflow-x-scroll	Always shows a horizontal scrollbar, regardless of whether the content exceeds the container's size.
.overflow-y-scroll	Always shows a vertical scrollbar, regardless of whether the content exceeds the container's size.

Auto

Utility class	Description	Example
.overflow-auto	Automatically adds scrollbars only if the content exceeds the container's dimensions on either axis.
.overflow-x-auto	Adds a horizontal scrollbar only if the content is wider than the container. Set `.overflow-y-hidden` to explicitly prevent the y-axis (vertical) scrollbar.
.overflow-y-auto	Adds a vertical scrollbar only if the content is taller than the container. Set `.overflow-x-hidden` to explicitly prevent the x-axis (horizontal) scrollbar.

Utility classes

Utility classes may be included in your HTML or applied using Utility classes in your Sass.

Utility	Example	Code
.overflow-value	.overflow-auto	class=("overflow-auto")
.overflow-modifier-value	.overflow-x-hidden	class=("overflow-x-hidden")

Use single-quoted strings in Utility classes.
Do not quote numbers or px values. With the exception of half (05), values like '105', and '205' should be treated as strings.
String tokens for half values (like 05) and negative values (like neg-1) may also be written with their unquoted number token equivalent: 0.5, 1.5, 2.5, -1, -1.5, etc.
If multiple utilities share the same prefix (ex: .text- or .flex-) or a single utility accepts multiple kinds of values (ex: .border accepts both border weight and border color), their shared mixin can accept multiple comma-separated values:
- u-text('primary-darkest', 'no-underline', 'bold')
- u-border-top(2px, 'accent-warm')
Output any utility mixin as !important by appending !important to the mixin’s argument list:

u-bg('red-warm-50v', !important)

Utility variants

More information about utility variants can be viewed on the utility variants page. Responsive and state variants are listed as true when they are available for use.

Responsive variants

You can apply different styles at differentresponsive breakpoints using responsive utilities. Use a breakpoint prefix separated with a : to target a utility at a responsive breakpoint and higher (eg. .desktop:border-05).

Utility variable	Responsive
$font-style-settings	false

State variants

You can apply different styles for different state variants using state utilities. Use a state prefix separated with a : to target a utility for a specific state. (eg. .hover:shadow-2).

Utility variable	Active	Focus	Hover	Visited
$font-style-settings	false	false	false	false