CSS overflow-x Property

The overflow-x property controls how content that extends beyond an element’s horizontal box is handled. At a basic level it determines whether that extra content is clipped, allowed to remain visible outside the element’s bounds, or made available via a horizontal scrolling mechanism; the property applies specifically to the x-axis, so it governs left/right overflow independently of vertical overflow. Because it targets only one axis, it’s commonly used when you need different horizontal and vertical behaviors for the same element (for example, allowing horizontal scrolling while keeping vertical overflow clipped).

Axis-specific behavior interacts with shorthand and counterpart properties: for example, overflow-y controls the vertical axis and the axis-specific properties normally take precedence over the shorthand overflow when both are present. This means you can set a general overflow behavior for an element and then fine-tune horizontal behavior independently. It’s important to remember this precedence when troubleshooting why content is or isn’t scrolling or being clipped.

The effect of overflow-x is also influenced by how the element participates in layout. Elements with intrinsic or auto sizing, their display type, and how children are sized or positioned will determine whether horizontal overflow actually occurs; this makes the interplay with properties such as display and white-space significant in practice. For instance, long unbroken text or preformatted blocks can create horizontal overflow unless the wrapping behavior is adjusted, and flex or grid containers handle child dimensions differently than block-level boxes.

In practical use, overflow-x is frequently applied to create horizontal scroll containers, to crop visual elements that should not extend past an edge, or to prevent unwanted horizontal scrollbars caused by wide children. It also affects painting and hit-testing: clipped content remains part of the DOM and accessible to assistive technologies even when visually hidden, but it will not be visible or interactive in the clipped region. Finally, because horizontal overflow can introduce scrollbars and change available inner space, designers should test for layout shifts and ensure a good experience on both pointer and touch devices; widths and heights of the container (e.g., width and height) and how content is sized will often be the deciding factors for whether horizontal overflow appears.