CSS overflow

The CSS overflow property is used to control the overflowed content. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{background-color: chocolate; color: white;
         padding: 10px; width: 180px; height: 80px;
         overflow: auto;}
   </style>
</head>
<body>
   
   <div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere, tenetur 
      delectus rem suscipit pariatur quidem voluptate id. Eaque, deserunt aliquam.
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit,
      amet consectetur adipisicing elit. Ipsam sit voluptates dolore cum, deserunt
      laudantium architecto in eos?
   </div>
   
</body>
</html>

Output

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere, tenetur delectus rem suscipit pariatur quidem voluptate id. Eaque, deserunt aliquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam sit voluptates dolore cum, deserunt laudantium architecto in eos?

Note - The overflow property only works for block elements with height property specified to it.

CSS overflow Syntax

The syntax of overflow property in CSS, is:

overflow: x;

The value of x should be any of the following:

auto - used to clip the overflowed content. However the overflowed/hidden content can be seen by scrolling the content
scroll - used to clip the overflowed content. However the overflowed/hidden content can be seen using the scroll bar added to it. Similar to auto, but a bottom scroll bar is also added that is created within the specified height
visibile - used not to clip the overflowed content. Rather the overflowed content gets overflowed outside the defined box or element's height. This is the default value
hidden - used to clip the overflowed content in a way that the overflowed content becomes invisible
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS overflow Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{background-color: chocolate; padding: 10px;
         height: 66px; margin: 20px 0;}
      div.a{overflow: auto;}
      div.b{overflow: scroll;}
      div.c{overflow: visible;}
      div.d{overflow: hidden;}
   </style>
</head>
<body>
   
   <div>
      <h2>Without overflow</h2>
      <p>This is an example of overflow property</p>
   </div>
   <div class="a">
      <h2>overflow: auto</h2>
      <p>This is an example of overflow: auto</p>
   </div>
   <div class="b">
      <h2>overflow: scroll</h2>
      <p>This is an example of overflow: scroll</p>
   </div>
   <div class="c">
      <h2>overflow: visible</h2>
      <p>This is an example of overflow: visible</p>
   </div>
   <div class="d">
      <h2>overflow: hidden</h2>
      <p>This is an example of overflow: hidden</p>
   </div>
   
</body>
</html>

Output

Without overflow

This is an example of overflow property

overflow: auto

This is an example of overflow: auto

overflow: scroll

This is an example of overflow: scroll

overflow: visible

This is an example of overflow: visible

overflow: hidden

This is an example of overflow: hidden

Here are the list of two properties that can be used to control overflowed content horizontally and/or vertically:

overflow-x - used to control the overflowed content horizontally
overflow-y - used to control the overflowed content vertically

CSS Online Test

« Previous Tutorial Next Tutorial »