CSS overflow-x Property

This property controls how the browser handles content that overflows the left and right edges of an element.

selector { overflow-x: value; }
visible Content is not clipped and may be rendered outside the element's content box.
hidden Content is clipped and no scrollbars are provided to view the hidden content.
clip Content is clipped to the element's overflow clip edge and scrolling is strictly forbidden.
scroll Content is clipped and horizontal scrollbars are always shown whether content overflows or not.
auto Horizontal scrollbars are provided by the browser only if the content exceeds the element's width.

Code Examples

A basic example showing how to hide horizontal overflow for a single line of text.

<div style="width: 250px; border: 5px solid #333333; overflow-x: hidden; white-space: nowrap;">
  This sentence is too long to fit in this small box and will be cut off.
</div>

An advanced example using a flexbox container with horizontal scrolling and a JavaScript toggle to switch the overflow behavior.

<div id="scrollBox" style="width: 300px; border: 2px solid #222222; overflow-x: auto; display: flex;">
  <div style="min-width: 200px; height: 100px; background: #ff0000;">Box 1</div>
  <div style="min-width: 200px; height: 100px; background: #00ff00;">Box 2</div>
  <div style="min-width: 200px; height: 100px; background: #0000ff;">Box 3</div>
</div>
<button onclick="enableScroll()">Toggle Fixed Scrollbars</button>

<script>
function enableScroll() {
  const box = document.getElementById("scrollBox");
  box.style.overflowX = "scroll";
  box.style.backgroundColor = "#f0f0f0";
}
</script>

Pro Tip

For smooth, native-feeling horizontal scrolling on mobile devices, combine overflow-x: auto with the non-standard -webkit-overflow-scrolling: touch property. This gives your containers the same kinetic momentum and bounce effect found in native mobile applications.

Deep Dive

Think of an element as a window frame. If the picture behind the window is wider than the frame, overflow-x decides what happens. When set to hidden, the extra content is like a secret hidden behind the wall. When set to scroll or auto, the browser provides a slider at the bottom. Technically, using any value other than visible creates a new Block Formatting Context. A crucial detail is that if you set one axis to visible and the other to something else like hidden or auto, the browser will automatically treat the visible axis as auto to prevent rendering conflicts.

Best Practices

Always prefer auto over scroll for a cleaner user interface. This ensures scrollbars only appear when they are actually needed, preventing empty scrollbar tracks from cluttering your design. When building mobile-friendly layouts, use overflow-x: auto on containers for large data tables or code snippets to prevent them from breaking the entire page layout.

Common Pitfalls

A common mistake is trying to have overflow-x: hidden while keeping overflow-y: visible. CSS does not allow this combination; if one axis is clipped, the other must be too. Another issue is accidentally clipping box-shadows or absolutely positioned child elements that are meant to hang outside the parent container. If your shadows are disappearing, check if overflow-x is set to hidden on the parent.

Accessibility

If you use hidden, ensure that users can still access the clipped content through other means, as it becomes unreachable for keyboard and screen reader users. For scrollable areas, ensure the container can be focused using the keyboard (tabindex="0") so that users without a mouse can use their arrow keys to scroll through the content.

Dev Data Table: overflow-x property

default visible
animatable no
inherited no
experimental no
year_intro 2002
year_standard 2011
js_syntax_1 object.style.overflowX = "auto";
js_syntax_2 object.style.setProperty("overflow-x", "scroll");
js_note The property is camelCased as overflowX when accessing the style object directly in JavaScript.
browsers { "Chrome": "1", "Edge": "12", "Firefox": "3.5", "Safari": "3", "Opera": "9.5", "Chrome Android": "18", "Safari on iOS": "1", "Samsung Internet": "1.0", "Opera Mobile": "10" }
results render here...