In this section, we will learn what the overflow-x property is and how to use it in CSS.

CSS overflow-x Property Definition and Usage

The CSS overflow-x property is used to control what should be done when horizontally the content of an element overflowed.

Note: if you want to vertically control an overflow in an element, you can use the overflow-y property. Also, the CSS overflow property controls overflow in both horizontal and vertical directions, so it can be used instead of these two properties if the purpose is to handle both directions overflow in an element.

CSS overflow-x Property Syntax

overflow-x: visible|hidden|scroll|auto|initial|inherit;

CSS overflow-x Property Value

Here’s the list of values that could be used for this property:

• visible: this is the default value and it basically lets the content that horizontally passed the boundary of an element to be visible.
• hidden: using this value, any content that horizontally passed the boundary of an element will be trimmed or hidden from users.
• scroll: if we set the value to “scroll”, browsers will add a scrollbar to the target element so that users can scroll and see the invisible content. (the scrollbar will be with the target element even if there’s no overflow)
• auto: This value pretty much acts the way “scroll” does, except only showing scrollbars when overflow occurred.

Example: overflow-x in CSS

See the Pen overflow-x in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

How Does CSS overflow-x Property Work?

In this example, because the width of the paragraph element is not high enough to show its content, overflow occurred and because we’ve set the value of the `overflow-x` property to “scroll”, a horizontal scrollbar appeared which allow users to horizontally scroll in order to see the rest of content in this paragraph.