overflow - Layout - Tailwind CSS

overflow

Utilities for controlling how an element handles content that is too large for the container.

Class Styles

Class	Styles
`overflow-auto`	`overflow: auto;`
`overflow-hidden`	`overflow: hidden;`
`overflow-clip`	`overflow: clip;`
`overflow-visible`	`overflow: visible;`
`overflow-scroll`	`overflow: scroll;`
`overflow-x-auto`	`overflow-x: auto;`
`overflow-y-auto`	`overflow-y: auto;`
`overflow-x-hidden`	`overflow-x: hidden;`
`overflow-y-hidden`	`overflow-y: hidden;`
`overflow-x-clip`	`overflow-x: clip;`
`overflow-y-clip`	`overflow-y: clip;`
`overflow-x-visible`	`overflow-x: visible;`
`overflow-y-visible`	`overflow-y: visible;`
`overflow-x-scroll`	`overflow-x: scroll;`
`overflow-y-scroll`	`overflow-y: scroll;`

overflow-auto

overflow: auto;

overflow-hidden

overflow: hidden;

overflow-clip

overflow: clip;

overflow-visible

overflow: visible;

overflow-scroll

overflow: scroll;

overflow-x-auto

overflow-x: auto;

overflow-y-auto

overflow-y: auto;

overflow-x-hidden

overflow-x: hidden;

overflow-y-hidden

overflow-y: hidden;

overflow-x-clip

overflow-x: clip;

overflow-y-clip

overflow-y: clip;

overflow-x-visible

overflow-x: visible;

overflow-y-visible

overflow-y: visible;

overflow-x-scroll

overflow-x: scroll;

overflow-y-scroll

overflow-y: scroll;

Examples

Showing content that overflows

Use the overflow-visible utility to prevent content within an element from being clipped:

Note that any content that overflows the bounds of the element will then be visible.

Hiding content that overflows

Use the overflow-hidden utility to clip any content within an element that overflows the bounds of that element:

Scrolling if needed

Use the overflow-auto utility to add scrollbars to an element in the event that its content overflows the bounds of that element:

Scroll vertically

Unlike overflow-scroll, which always shows scrollbars, this utility will only show them if scrolling is necessary.

Scrolling horizontally if needed

Use the overflow-x-auto utility to allow horizontal scrolling if needed:

Scroll horizontally

Scrolling vertically if needed

Use the overflow-y-auto utility to allow vertical scrolling if needed:

Scroll vertically

Scrolling horizontally always

Use the overflow-x-scroll utility to allow horizontal scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system:

Scroll horizontally