Overflow

Control clipping and scrolling with the bundled overflow utilities.

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

Class	CSS	Usage
.overflow-hidden	overflow: hidden;	Clip overflowing content
.overflow-auto	overflow: auto;	Scroll only when needed
.overflow-visible	overflow: 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.

Related Utilities

Display

Display utilities for container behavior

Object Fit

Control how images fit in containers