Overview
Use overflow utilities when content needs to be clipped, scrollable, or explicitly allowed to spill outside its frame. The bundle shipsoverflow-hidden, overflow-auto, and overflow-visible, each with responsive --on-* suffix variants like other structural utilities (see Breakpoints).
Overflow Visible
Without an overflow class, browsers useoverflow: visible by default. Use .overflow-visible when you need to name that behavior—typically to override an ancestor’s overflow-hidden or to make overflow explicit in the class list. The demo below illustrates visible overflow; in real markup, apply .overflow-visible on the element you want to unclip.
Overflow Hidden
.overflow-hidden clips any content that extends beyond the container boundaries. The clipped content is not accessible via scrolling.
Overflow Auto
.overflow-auto adds scrollbars only when content overflows. This keeps content reachable without cluttering the UI with unnecessary scrollbars.
Best Practices
1
Use Hidden for Cropped Surfaces
overflow-hidden is ideal for rounded media cards, avatars, and framed layouts.2
Use Auto for Accessible Long Content
overflow-auto keeps content reachable without forcing scrollbars when they are not needed.3
Give the Container a Real Frame
Overflow only becomes visible when the element has constrained size through height, width, or aspect ratio.
4
Pair With Object Fit
Overflow and object-fit work especially well together for media-heavy layouts.
5
Use Visible to Reset Clipping
When a parent uses
overflow-hidden but a child must escape the clip (for example a dropdown or tooltip), overflow-visible on the right ancestor restores visible overflow.Related Utilities
Display
Display utilities for container behavior
Object Fit
Control how images fit in containers