Overflow

What happens to content that is too big for the column: show it, hide it, or make it scroll.

Where to find it
Labelled Overflow in the "Selected Column" section of the Modify drawer.
Per device
Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.
Underlying CSS
overflow

In plain English

Sometimes content does not fit the box you gave it — a long word in a narrow column, a tall image in a capped panel. Overflow is where you decide what the visitor sees when that happens.

This setting covers both directions at once, horizontal and vertical. If you only care about one direction, use Overflow X or Overflow Y instead.

The default, "visible", is why capping a height can cause content to overlap the section below: the browser is doing exactly what it was told and letting the extra content show through.

What each option does

OptionWhat you will see
visibleThe default. Extra content spills outside the box and stays visible, even if it overlaps what is around it.
hiddenExtra content is cut off at the edge and cannot be reached. Good for cropping images, risky for text.
scrollThe box gets scrollbars and the visitor can scroll to the rest. Scrollbars are always shown, even when everything fits.
autoLike scroll, but the scrollbars only appear when they are actually needed. This is usually the friendliest choice.
clipLike hidden, but scrolling is forbidden entirely — not even by keyboard or script. A stricter crop.

When you would use it

  • You capped a Max Height and content is now spilling over the section below.
  • You want a long list to become a neat scrollable panel: choose "auto".
  • An image should be cropped to the shape of its container: choose "hidden".

How to change it

  1. Select the column, open "Selected Column", then "Overflow".
  2. Pick a value from the dropdown.
  3. Preview the result. If nothing appears to change, the content probably fits, so there is no overflow to handle yet.
One value, or one per device? Every input in this setting sits under a “Same value for all resolutions” checkbox. Leave it checked for a single value everywhere, or uncheck it to give phones, tablets, and desktops their own. How per-device values work.

Watch out for

  • Overflow only does something when the box actually has a size limit. Without a Height or Max Height there is usually nothing to overflow.
  • Choosing "hidden" can silently hide content from visitors on smaller screens where less fits. Preview every device size.
  • If you set this alongside Overflow X or Overflow Y, the browser resolves the conflict itself, and the result is not always the one you intended. Set either this or the per-axis settings, not both.

Related settings

For developers

The technical reference for what this setting produces: MDN: overflow. You do not need any of it to use the setting — it is there for whoever is building the components or debugging the published page.

Where to go next