W3docs
en
Log in

CSS overflow-x Property

Learn how the CSS overflow-x property controls horizontal clipping and scrolling when content overflows a box. Includes values, examples, and browser tips.

The overflow-x property controls what happens to content that extends beyond the left and right edges of a box. You can let it spill out, clip it silently, or add a horizontal scrollbar.

overflow-x is part of the CSS overflow shorthand and works in tandem with overflow-y, which handles vertical overflow.

Info

If overflow-y is set to hidden, scroll, or auto, and overflow-x is left at its default visible, browsers automatically compute overflow-x as auto. A value of visible cannot coexist with a non-visible value on the perpendicular axis.

Initial Valuevisible
Applies toBlock-containers, flex containers and grid containers.
InheritedNo.
AnimatableNo.
VersionCSS3
DOM Syntaxobject.style.overflowX = "scroll";

Syntax

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

Values

ValueDescription
visibleContent is not clipped. It renders outside the padding box's left and right edges. This is the default.
hiddenContent is clipped at the padding box edges. No scrollbar is shown and the clipped content is not accessible.
scrollContent is clipped and a horizontal scrollbar is always shown, even if the content fits.
autoContent is clipped only when it overflows. A scrollbar appears only when needed. Preferred over scroll in most cases.
clipLike hidden, but also disallows programmatic scrolling via JavaScript (scrollLeft, scroll()). Supported in modern browsers.
initialResets the property to its default value (visible).
inheritInherits the value from the parent element.

When to use each value

  • visible — the default. Use it when overflow is intentional, for example a tooltip or dropdown that must extend beyond its container.
  • hidden — use to mask overflow in design components (image cards, sliders) where clipped content should never be reached. Be aware that any content cut off is inaccessible to keyboard and screen-reader users.
  • scroll — use when you always want a visible scrollbar, such as in side-by-side comparison views, so the layout does not shift when content length varies.
  • auto — the most common choice for responsive containers. The scrollbar appears only when the content actually overflows, keeping the layout clean.
  • clip — use when you want the same hard clip as hidden but also need to prevent JavaScript from programmatically scrolling the element (useful in certain animation techniques).

Practical patterns

A common use case is a horizontal scrolling container for wide content such as data tables or code blocks. Combine overflow-x: auto with white-space: nowrap (see white-space) to keep content on one line:

.scroll-container {
  overflow-x: auto;
  white-space: nowrap;
  max-width: 100%;
}

For text-overflow ellipsis (…) to work, you need overflow-x: hidden (or overflow: hidden) together with white-space: nowrap:

.truncate {
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Examples

overflow-x: scroll

The container is only 40 px wide. With scroll, a horizontal scrollbar is always shown so users can reach the rest of the text.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        background-color: #1c87c9;
        color: #fff;
        width: 40px;
        overflow-x: scroll;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>Overflow-x: scroll</h3>
    <div class="example">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>
Try it Yourself »

overflow-x: visible

With visible, the text renders outside the narrow box and overlaps surrounding content. This is the default browser behavior.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        background-color: #1c87c9;
        color: #cccccc;
        width: 40px;
        overflow-x: visible;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>Overflow-x: visible</h3>
    <div class="example">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>
Try it Yourself »

overflow-x: hidden

With hidden, the text is silently clipped at the right edge. No scrollbar is shown and the clipped portion cannot be reached.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        background-color: #1c87c9;
        color: #fff;
        width: 40px;
        overflow-x: hidden;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>Overflow-x: hidden</h3>
    <div class="example">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>
Try it Yourself »

overflow-x: auto

With auto, the scrollbar appears only when the content actually overflows — the cleanest option for most layouts.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        background-color: #1c87c9;
        color: #fff;
        width: 40px;
        overflow-x: auto;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>Overflow-x: auto</h3>
    <div class="example">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>
Try it Yourself »

All values compared

The example below places all four main values side-by-side so you can compare their visual effect at once.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.scroll {
        background-color: #ccc;
        width: 50px;
        overflow-x: scroll;
      }
      div.hidden {
        background-color: #ccc;
        width: 50px;
        overflow-x: hidden;
      }
      div.auto {
        background-color: #ccc;
        width: 50px;
        overflow-x: auto;
      }
      div.visible {
        background-color: #ccc;
        width: 50px;
        overflow-x: visible;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>overflow-x: scroll</h3>
    <div class="scroll">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <h3>overflow-x: hidden</h3>
    <div class="hidden">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <h3>overflow-x: auto</h3>
    <div class="auto">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <h3>overflow-x: visible</h3>
    <div class="visible">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>
Try it Yourself »
  • overflow — shorthand that sets both overflow-x and overflow-y at once.
  • overflow-y — controls vertical (top/bottom) overflow behavior.
  • overflow-wrap — specifies whether the browser may break long words to prevent horizontal overflow.
  • text-overflow — controls how overflowed text is signaled to the user (e.g., ellipsis).
  • white-space — determines whether text wraps; combining white-space: nowrap with overflow-x is a common pattern.

Practice

Practice
Which value for overflow-x always shows a horizontal scrollbar, even when the content fits?
Which value for overflow-x always shows a horizontal scrollbar, even when the content fits?
Was this page helpful?