CSS overflow Property

The overflow property defines the behavior content which overflows the element box.

It specifies whether the content should be clipped to fit in the box or scrollbars should be added on the element.

It is shorthand for:

The content overflows when the container has a height and width set.

The overflow property has the following value:

  • visible
  • hidden
  • scroll
  • auto
  • overlay

"Overlay" value is deprecated.

Initial Value visible
Applies to Block containers, flex containers and grid containers.
Inherited No.
Animatable No.
Version CSS2
DOM Syntax Object.style.overflow = "auto";

Syntax

overflow: visible | hidden | scroll | auto | overlay | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
      background-color: #ccc;
      width: 300px;
      height: 200px;
      overflow: visible;
      }
    </style>
  </head>
  <body>
    <h2>Overflow property example</h2>
    <h3>overflow: visible</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </body>
</html>

Another example where "scroll" value is applied:

Example

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
      background-color: #ccc;
      width: 300px;
      height: 200px;
      overflow: scroll;
      }
    </style>
  </head>
  <body>
    <h2>Overflow property example</h2>
    <h3>overflow: scroll</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </body>
</html>

Example with the "hidden" value which cuts the content to fit the box:

Example

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
      background-color: #ccc;
      width: 300px;
      height: 200px;
      overflow: hidden;
      }
    </style>
  </head>
  <body>
    <h2>Overflow property example</h2>
    <h3>overflow: hidden</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </body>
</html>

An example which contains all values of this property:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.scroll {
      background-color: #eee;
      width: 300px;
      height: 200px;
      overflow: scroll;
      }
      div.hidden {
      background-color: #eee;
      width: 300px;
      height: 200px;
      overflow: hidden;
      }
      div.auto {
      background-color: #eee;
      width: 300px;
      height: 200px;
      overflow: auto;
      }
      div.visible {
      background-color: #eee;
      width: 300px;
      height: 200px;
      overflow: visible;
      }
      div.overlay {
      background-color: #eee;
      width: 300px;
      height: 200px;
      overflow: overlay;
      }
    </style>
  </head>
  <body>
    <h2>Overflow property example</h2>
    <h3>overflow: scroll</h3>
    <div class="scroll">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    <h3>overflow: hidden</h3>
    <div class="hidden">Lorem Ipsum is simply the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    <h3>overflow: auto</h3>
    <div class="auto">Lorem Ipsum is simply the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    <h3>overflow: visible</h3>
    <div class="visible">Lorem Ipsum is simply the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    <br/>
    <br/>
    <h3>overflow: overlay</h3>
    <div class="overlay">Lorem Ipsum is simply the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  </body>
</html>

Values

Value Description
visible The content is not clipped and renders outside the padding box. This is the default value of this property.
hidden The content is clipped to fit the padding box.
scroll The scrollbar is added to see the rest of the content.
auto Depends on the browser. If content overflows, scrollbar is added.
overlay Works the same as auto, but with the scrollbars drawn on top of content instead of taking up space.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.




Related articles