Overflow

Basic usage

Showing content that overflows

Use overflow-visible to prevent content within an element from being clipped. Note that any content that overflows the bounds of the element will then be visible.

Andrew Alfred Technical advisor

<div className="**overflow-visible** ..."></div>

Hiding content that overflows

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

Andrew Alfred Technical advisor

<div className="**overflow-hidden** ..."></div>

Scrolling if needed

Use overflow-auto to add scrollbars to an element in the event that its content overflows the bounds of that element. Unlike .overflow-scroll, which always shows scrollbars, this utility will only show them if scrolling is necessary.

Andrew Alfred Technical advisor

Debra Houston Analyst

Jane White Director, Marketing

Ray Flint Technical Advisor

<div className="**overflow-auto** ..."></div>

Scrolling horizontally if needed

Use overflow-x-auto to allow horizontal scrolling if needed.

Andrew

Emily

Whitney

David

Kristin

Sarah

<div className="**overflow-x-auto** ..."></div>

Scrolling vertically if needed

Use overflow-y-auto to allow vertical scrolling if needed.

Andrew Alfred

Technical advisor

Debra Houston

Analyst

Jane White

Director, Marketing

Ray Flint

Technical Advisor

<div className="**overflow-y-auto** h-32 ..."></div>

Scrolling horizontally always

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

Andrew

Emily

Whitney

David

Kristin

Sarah

<div className="**overflow-x-scroll** ..."></div>

Scrolling vertically always

Use overflow-y-scroll to allow vertical scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system.

Andrew Alfred

Technical advisor

Debra Houston

Analyst

Jane White

Director, Marketing

Ray Flint

Technical Advisor

<div className="**overflow-y-scroll** ..."></div>

Scrolling in all directions

Use overflow-scroll to add scrollbars to an element. Unlike .overflow-auto, which only shows scrollbars if they are necessary, this utility always shows them. Note that some operating systems (like macOS) hide unnecessary scrollbars regardless of this setting.

<div className="**overflow-scroll** ..."></div>