CSS overflow-x Property

The overflow-x property specifies whether the content should be hidden, visible or scrolls horizontally when the content overflows the element’s left and right edges.

The overflow-x property has four value: visible, hidden, scroll, auto.

Initial Value visible
Applies to Block-containers, flex containers and grid containers.
Inherited No.
Animatable No.
Version CSS3
DOM Syntax object.style.overflowX = "visible";

Syntax

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

Example

<!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>

Example with the "visible" value:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
      background-color: #1c87c9;
      color: #fff;
      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>

Example with the "hidden" value:

Example

<!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>

Example with the "auto" value:

Example

<!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>

Example where all four values are included:

Example

<!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: hidden;
      }
      div.auto {
      background-color: #ccc;
      width: 50px;
      overflow: auto;
      }
      div.visible {
      background-color: #ccc;
      width: 50px;
      overflow: 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>

Values

Value Description
visible The content is not clipped and renders outside the padding box's left and right edges. This is the default value of this property.
hidden The content is clipped to fit horizontally in the padding box. No scrollbar is added.
scroll The content is clipped to fit horizontally in the padding box. The scrollbar is added to see the rest of the content.
auto The content is clipped to fit horizontally in the padding box. Depends on the browser. If content overflows, scrollbar is added.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.




Related articles