Skip to main content

​
Overview

Use overflow utilities when content needs to be clipped, scrollable, or explicitly allowed to spill outside its frame. The bundle ships overflow-hidden, overflow-auto, and overflow-visible, each with responsive --on-* suffix variants like other structural utilities (see Breakpoints).
ClassCSSUsage
.overflow-hiddenoverflow: hidden;Clip overflowing content
.overflow-autooverflow: auto;Scroll only when needed
.overflow-visibleoverflow: visible;Let content extend past the box; reset clipping from a parent

​
Overflow Visible

Without an overflow class, browsers use overflow: 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. 
<div class="elementor-element overflow-hidden border-1 border-solid border-gray rounded" style="width: 18rem; height: 8rem;">
  <p class="padding-4">
    This content might overflow the container and will be hidden if it does.
  </p>
</div>

​
Overflow Auto

.overflow-auto adds scrollbars only when content overflows. This keeps content reachable without cluttering the UI with unnecessary scrollbars. 
<div class="elementor-element overflow-auto border-1 border-solid border-gray rounded" style="width: 18rem; height: 8rem;">
  <p class="padding-4">
    This content will show scrollbars when it overflows the container.
  </p>
</div>

​
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.

Display

Display utilities for container behavior

Object Fit

Control how images fit in containers