Overflow: Clip
Learn what the Clip overflow value does, how it differs from Hidden, and when to use it to prevent layout issues.
Overflow controls how content that extends beyond a layer’s boundaries is handled. Clip is the default Overflow value in Framer, replacing the previous default of Hidden. It provides the same visual clipping behavior with fewer side effects.
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 — just like the Hidden setting. The key difference is how it works under the hood.
Clip uses the CSS overflow: clip property, which clips content without creating a new scroll container. This means:
No scroll interference — Clip doesn’t interfere with smooth scrolling or scroll-based effects on the page.
Sticky positioning works — Sticky elements inside a clipped container continue to work as expected, without any workarounds.
Better performance — Clip avoids creating unnecessary scroll contexts, which can improve rendering performance.
How Clip differs from Hidden
The Hidden setting uses CSS overflow: hidden, which creates a scroll container behind the scenes — even when scrolling isn’t intended. This can cause problems:
Sticky elements inside a hidden container may stop working.
Smooth scrolling can break or behave unexpectedly.
Unwanted horizontal scrolling may appear on mobile devices.
Clip avoids all of these issues because it clips content without creating a scroll container.
Per-axis clipping
Framer also supports per-axis clip settings via the Overflow X and Overflow Y properties. This lets you clip content in one direction while allowing it to remain visible or scroll in the other — useful for horizontal carousels or vertically expanding content.
When to use Clip
Clip is the recommended default for most layers. Use it when:
You want to hide overflowing content without affecting scroll behavior.
You have sticky elements inside the layer.
You’re experiencing horizontal scrolling issues on mobile (Clip is the recommended fix over Hidden).
Use Hidden only when you specifically need to create a scrollable container (paired with Auto or Scroll), or when targeting older browsers that don’t support overflow: clip.
How to set Overflow to Clip
Select any Frame or layer on the canvas. In the properties panel, find the Overflow setting and select Clip. For per-axis control, use the Overflow X and Overflow Y options.
Clip is the default value for new layers, so in most cases no action is needed.
FAQ
What is the difference between Overflow: Clip and Overflow: Hidden?
Both visually hide content that extends beyond a layer’s boundaries. However, Hidden creates a scroll container behind the scenes, which can break sticky elements and smooth scrolling. Clip uses the CSS overflow: clip property, which clips content without creating a scroll container — avoiding these issues and providing better performance.
Will Clip fix horizontal scrolling issues on mobile?
Yes. Horizontal scrolling on mobile is often caused by using overflow: hidden on layers, which creates unwanted scroll containers. Switching to Clip eliminates this problem because it clips content without creating a scroll context.
Can I clip content in only one direction?
Yes. Use the Overflow X and Overflow Y properties to control clipping per axis. For example, you can clip horizontally while allowing content to remain visible vertically.
Updated