How do I set overflow in Webflow?

Open Overflow in Size

Overflow is what the box does when the content is larger than the box. Select the element and open Style panel, Size, Overflow. The first icon, visible, is the default. Text that does not fit paints outside the boundary.

Overflow shows up when a width and a height are set and the content needs more room. The size fields themselves are the width and height guide. This page is only the overflow control.

Example: a quote card is 240px tall and the sentence is longer. With visible, the last lines paint over the next card. That is the default, not a broken card.

Choose hide, clip, scroll, or auto

Hide cuts off whatever spills outside the element. Clip also cuts off that spill. Webflow notes subtle differences between them, and those differences make clip the better option when the element's position is sticky.

Scroll, depending on the operating system and the browser, can show a scrollbar so someone can move through a Box. Auto allows scrolling only when there is enough content to overflow. Do not turn on auto for a box whose content already fits.

Use hide when the spill should not be seen, such as a photo that sticks out of a frame, or a row that slides sideways inside a window. Use a taller min height when the spill is a sentence people need to read. A clip that slices a word is the wrong fix for a short card.

Example: the quote card should show the whole sentence. Clear the fixed height and set a min height, which is the size guide. A logo row that must not widen the page is the hide case in the next section.

Stop a sideways scroll without freezing the page

A page that scrolls sideways usually has an element sized or positioned past the viewport, or an interaction that starts off the screen. A heading that flies in from the side can leave that extra width in place after the animation ends. The browser still counts the starting position.

In the Designer, scroll left and right. With a mouse wheel, hold Shift to scroll sideways. Drag the edge of the canvas and look for a piece hanging off the boundary. You can turn on X-ray mode in Canvas settings to see those edges. Then publish, because an interaction's extra space often shows on a phone even when the desktop canvas looks clean.

To cut the spill, select the parent of the element that hangs out. A Box with a section tag is the usual parent of a wide image. Open Style panel, Size, and set Overflow to hidden. Anything outside that parent is hidden.

Do not set hidden on the body. That can clip the rest of the page and stop people from scrolling past the first screen. If the whole page needs the clip, drag a Box under the body, move the page elements inside that Box, and set hidden on the Box only after they are inside.

If hidden on the heading's parent also clips the fly-in, set that parent back to visible. Set hidden on the next parent up, such as the hero section. The animation can still travel inside the section, and the page no longer grows sideways.

Percentage widths, and max widths at 100% or less on the child, can keep an element inside its parent before you hide anything. A decorative photo behind text can be a background image instead of an image element that sticks out. The mobile layout guide is the pass when the published page already scrolls sideways.

Do not hide overflow on a sticky parent

Position sticky does not work if any parent is set to overflow hidden. Scroll and auto on a parent can stop it too, and so can a set height on a parent. A section that was clipped to stop sideways scroll will also stop a navbar inside it from sticking.

If the bar stopped holding, check each parent from the navbar up to the body. Set the blocking parent back to visible, or move the navbar out of that section. The sticky navbar guide is that check. When the sticky element itself must trim what sticks out of it, use clip rather than hide. Clip is the option Webflow points to for a sticky element.

Publish and scroll both ways

Publish the page. Scroll down. The page should still move. Then scroll sideways on a phone. The extra blank space should be gone.

If the sideways scroll remains, the hidden box is not the parent of the piece that sticks out, or an interaction still starts off screen. If the page will not scroll down, hidden is on the body, or on a wrapper that is only as tall as the first screen. Set that overflow back to visible and clip a tighter parent instead.

Overflow on a class hits every element with that class. A card class set to hide clips every card. Name a separate class when only the logo row should clip.

Setting overflow on a site you already have is ordinary layout work. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Additional work is $75 per hour and starts only after you approve a written estimate.