CSS overflow Property

The overflow property defines the behavior content which overflows the element box. This property only works for block elements that have a specified height.

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

This is a shorthand for the following properties:

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

The overflow property has the following values:

  • visible
  • hidden
  • scroll
  • auto
  • overlay

"Overlay" value is deprecated.

One of the uses of setting overflow is float clearing. However, setting overflow does not clear the float on the element. The element with overflow having a value other than "visible" will expand as large as it is needed to include floated child elements inside, supposing that the height isn’t declared.

The overflow property can also create a block formatting context. It is useful in the cases when we want to align a block element next to a floated element.

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 of the overflow property with the "visible" value:

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

Result

Example of the overflow property with the "scroll" value:

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

In the following example, the applied value cuts the content to fit the box.

Example of the overflow property with the "hidden" value:

<!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 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 of the overflow property with the "auto" value:

<!DOCTYPE> 
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      .scroll { 
      width:200px; 
      height:300px; 
      border:1px solid; 		
      overflow:auto; 
      margin-bottom:10px;
      } 
      .scroll-x { 
      width:200px; 
      height:300px; 
      border:1px solid; 		
      overflow-x:auto; 
      overflow-y:hidden; 
      margin-bottom:10px;
      } 
      .scroll-y { 
      width:200px; 
      height:300px; 
      border:1px solid; 		
      overflow-y:auto; 
      margin-bottom:10px;
      } 
      .scroll>div{
      width:400px; 
      height:50px; 
      background: #ccc;
      }
      .scroll-y>div{
      width:200px; 
      height:50px; 
      background: #ccc;
      }
      .scroll-x>div{
      width:400px; 
      height:50px; 
      background: #ccc;
      overflow: hidden;
      }
    </style>
  </head>
  <body>
    <h1>Example with Overflow Property</h1>
    <h2>overflow overflow scroll auto</h2>
    <div class="scroll">
      <h2>Overflow Property </h2>
      <div >
        <h2>overflow scroll property</h2>
      </div>
      <p> 
        Lorem Ipsum is 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>
    </div>
    <h2>overflow overflow-x auto</h2>
    <div class="scroll-x">
      <h2>Overflow Property </h2>
      <div >
        <h2>overflow scroll-x property</h2>
      </div>
      <p> 
        Lorem Ipsum is 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.
      </p>
    </div>
    <h2>overflow overflow-y auto</h2>
    <div class="scroll-y">
      <h2>Overflow Property </h2>
      <div >
        <h2>overflow scroll-y property</h2>
      </div>
      <p> 
        Lorem Ipsum is 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. software like Aldus PageMaker including versions of Lorem Ipsum.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>
      </p>
    </div>
  </body>
</html>

Example of the overflow property with all the values:

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

Browser support

1.0+ 12.0+ 1.0+ 1.0+ 7.0+

Practice Your Knowledge

The overflow property has the following values, except



Do you find this helpful?

Related articles