Overflow: Clip

Overflow controls how content is handled when it extends beyond a layer’s boundaries. Clip is the default Overflow setting in Framer and replaces the previous default, Hidden. It provides the same visual result while avoiding common scrolling and layout issues.

What Overflow: Clip does

When a layer’s Overflow is set to Clip, any content that extends beyond the layer’s boundaries is visually hidden.

Unlike Hidden, Clip uses the CSS overflow: clip property, which clips content without creating a scroll container. This helps preserve expected scrolling and layout behavior throughout your site.

Clip provides several benefits:

• Prevents interference with smooth scrolling and scroll-based effects

• Allows sticky elements to continue working inside clipped containers

• Avoids unnecessary scroll contexts, which can improve rendering performance

How Clip differs from Hidden

Although Clip and Hidden both hide overflowing content, they behave differently behind the scenes.

Hidden uses CSS overflow: hidden, which creates a scroll container even when scrolling is not intended. This can lead to unexpected behavior, including:

• Sticky elements that no longer stick

• Smooth scrolling issues

• Unwanted horizontal scrolling, especially on mobile devices

Clip avoids these issues because it clips content without creating a scroll container.

Use per-axis clipping

For more control, you can use the Overflow X and Overflow Y settings independently.

This allows you to:

• Clip content horizontally while allowing vertical scrolling

• Clip content vertically while keeping horizontal content visible

• Create layouts such as horizontal carousels or expanding content sections

When to use Clip

Clip is the recommended setting for most layers.

Use Clip when:

• You want to hide overflowing content without affecting scrolling behavior

• The layer contains sticky elements

• You need to prevent unwanted horizontal scrolling on mobile devices

Use Hidden only when:

• You intentionally need a scroll container alongside Auto or Scroll

• You need compatibility with older browsers that do not support overflow: clip

Set Overflow to Clip

To change a layer’s Overflow setting:

1. Select a Frame or layer on the Canvas.

2. In the right panel, locate the Overflow setting.

3. Select Clip.

For independent horizontal and vertical control, adjust the Overflow X and Overflow Y settings.

Clip is the default Overflow setting for new layers, so in most cases no additional configuration is required.