- Where to find it
- Labelled Overflow X 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
overflowX
In plain English
Overflow X is the horizontal half of Overflow. It decides what happens to content that is too wide for the column, and leaves the vertical direction alone.
The most common use is a wide table or a row of cards that should scroll sideways on a phone rather than break the page layout. Set Overflow X to "auto" and the visitor can swipe through it while the rest of the page stays put.
What each option does
| Option | What you will see |
|---|---|
visible | The default. Content wider than the column spills out sideways and stays visible. |
hidden | Content wider than the column is cut off at the left and right edges. |
scroll | A horizontal scrollbar is always shown, whether it is needed or not. |
auto | A horizontal scrollbar appears only when the content is genuinely too wide. The best choice for wide tables. |
clip | Like hidden, and scrolling is forbidden entirely. |
When you would use it
- A wide table needs to scroll sideways on phones instead of stretching the page.
- A horizontal strip of cards should be swipeable on small screens.
How to change it
- Select the column, open "Selected Column", then "Overflow X".
- Pick a value from the dropdown — "auto" for a scrollable strip, "hidden" to crop.
- Check the phone preview, since horizontal overflow almost only happens on narrow screens.
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
- Do not set this and Overflow at the same time. When both are present the browser decides which wins, and the outcome can surprise you.
- Setting one axis to "hidden" or "clip" while the other is "visible" is a combination browsers handle inconsistently; the visible axis is often forced to behave like "auto".
Related settings
For developers
The technical reference for what this setting produces: MDN: overflow-x. 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
- Back to the full attribute reference
- The Composer — the editing surface these settings live in.
- Publishing — how a change like this reaches your live site.