Overflow-X Property
Last updated: 2026-09-13
overflow-x Overflow-X Property
The overflow-x property controls specifically how content overflowing a container horizontally is handled and accepts the same values as overflow. The default value, visible, lets the overflow show. It is commonly used to disable horizontal page scrolling or to make a region scrollable only horizontally.
| Category | |
|---|---|
| Initial Value | visible |
| Inherited | No |
| Applies To | block-container |
| Animation Type | discrete |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
overflow-x: visible | hidden | clip | scroll | auto;⚙️ Values
| Value | Type | Description |
|---|---|---|
visible | hidden | scroll | auto | Keyword | Horizontal overflow handling. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| overflow-x | ✓ v4 | ✓ v12 | ✓ v1 | ✓ v3.1 | ✓ v10 |
| Supported in all major browsers | |||||
Tip： Setting overflow-x:hidden on body prevents horizontal scrollbars on the page.
❓ FAQ
QHow do I prevent horizontal scrolling on a page?
ASetting overflow-x:hidden on html or body clips the overflow, but that treats the symptom. Better to find the root cause: check whether an element is wider than the viewport, for example a width over 100%, long words, unwrapped text, or positioned elements, and use dev tools to spot which child of body overflows. Fixing the source is more reliable than adding overflow-x:hidden.
QWhat's the difference between overflow-x and overflow?
Aoverflow is the shorthand that sets both horizontal and vertical behavior at once; overflow-x sets only the horizontal direction. The two axes can be set separately, for example overflow-x:hidden; overflow-y:auto. One catch: when one axis is visible and the other is hidden, auto, or scroll, the visible value is forcibly changed to auto, so you cannot keep true visible overflow on the other axis at the same time.
QWhy does overflow-x:hidden sometimes not work?
ACommon causes: first, html and body scroll differently, so set it on both, on html and body, or on html alone; second, a parent has no width constraint, so a child wider than the parent still overflows; third, when the other axis is visible, the conflicting visible value gets rewritten to auto. Setting it on html,body together and fixing the overflow source is the reliable path.
QHow do I build a horizontally scrollable image list?
AGive the container overflow-x:auto with white-space:nowrap, or display:flex, and fixed widths on the children, and the row scrolls horizontally. With flex, add flex-shrink:0 to the items so they do not get compressed. On mobile, pair it with -webkit-overflow-scrolling:touch for smooth inertial scrolling, and consider scroll snap for a more polished feel, which makes the list feel native on touch devices.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
