The overflow-x CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.

If overflow-y is hidden, scroll or auto and this property is visible (default) it will implicitly compute to auto.


/* Keyword values */
overflow-x: visible;
overflow-x: hidden;
overflow-x: scroll;
overflow-x: auto;

/* Global values */
overflow-x: inherit;
overflow-x: initial;
overflow-x: unset;

The overflow-x property is specified as a single keyword chosen from the list of values below.


Content is not clipped and may be rendered outside the padding box's left and right edges.
Content is clipped if necessary to fit horizontally in the padding box. No scrollbars are provided.
Content is clipped if necessary to fit horizontally in the padding box. Browsers display scrollbars whether or not any content is actually clipped. (This prevents scrollbars from appearing or disappearing when the content changes.) Printers may still print overflowing content.
Depends on the user agent. If content fits inside the padding box, it looks the same as visible, but still establishes a new block-formatting context. Desktop browsers provide scrollbars if content overflows.

Formal syntax

visible | hidden | clip | scroll | auto



  <li><code>overflow-x:hidden</code> — hides the text outside the box
    <div id="div1">

  <li><code>overflow-x:scroll</code> — always adds a scrollbar
    <div id="div2">

  <li><code>overflow-x:visible</code> — displays the text outside the box if needed
    <div id="div3">

  <li><code>overflow-x:auto</code> — on most browsers, equivalent to <code>scroll</code>
    <div id="div4">


#div1, #div2, #div3, #div4 {
  border: 1px solid black;
  width:  250px;
  margin-bottom: 12px;

#div1 { overflow-x: hidden;}
#div2 { overflow-x: scroll;}
#div3 { overflow-x: visible;}
#div4 { overflow-x: auto;}



Specification Status Comment
CSS Overflow Module Level 3
The definition of 'overflow-x' in that specification.
Working Draft  

Initial valuevisible
Applies toBlock-containers, flex containers, and grid containers
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1Edge Full support 12Firefox Full support 3.5IE Full support 5
Full support 5
Full support 8
Prefixed Requires the vendor prefix: -ms-
Opera Full support 9.5Safari Full support 3WebView Android Full support 1Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes


Full support  
Full support
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also

Document Tags and Contributors

Last updated by: ddbeck,