CSS | Overflow

Difficulty Level : Basic
Last Updated : 03 Dec, 2018

The CSS overflow controls the big content. It tells whether to clip content or to add scroll bars. The overflow contains the following property:

visible
hidden
scroll
auto

Visible: The content is not clipped and visible outside the element box.
Example:

<!DOCTYPE>
<html>
   <head>
      <style>
         p {
         width:100px;
         height:80px;
         border:1px solid;
         overflow:visible;
         }
      </style>
   </head>
   <body>
      <h2>
         GEEKSFORGEEKS
      </h2>
      <p>
         The CSS overflow controls big content.
         It tells whether to clip content or to add scroll bars.
      </p>
   </body>
</html>

Output:

Hidden: The overflow is clipped and the rest of the content is invisible.

Example:

<!DOCTYPE>
<html>
   <head>
      <style>
         p {
         width:100px;
         height:80px;
         border:1px solid;
         overflow:hidden;
         }
      </style>
   </head>
   <body>
      <h2>
         GEEKSFORGEEKS
      </h2>
      <p>
         The CSS overflow controls big content.
         It tells whether to clip content or to add scroll bars.
      </p>
   </body>
</html>

Output:

Scroll: The overflow is clipped but a scrollbar is added to see the rest of the content. The scrollbar can be horizontal or vertical.
Example:

<!DOCTYPE>
<html>
   <head>
      <style>
         p {
         width:120px;
         height:100px;
         border:1px solid;
         overflow:scroll;
         }
      </style>
   </head>
   <body>
      <h2>
         GEEKSFORGEEKS
      </h2>
      <p>
         The CSS overflow controls big content.
         It tells whether to clip content or to add scroll bars.
      </p>
   </body>
</html>

Output:

Auto: It automatically adds a scrollbar whenever it is required.

Example:

<!DOCTYPE>
<html>
   <head>
      <style>
         p {
         width:120px;
         height:100px;
         border:1px solid;
         overflow:auto;
         }
      </style>
   </head>
   <body>
      <h2>
         GEEKSFORGEEKS
      </h2>
      <p>
         The CSS overflow controls big content.
         It tells whether to clip content or to add scroll bars.
      </p>
   </body>
</html>

Output:

Overflow-x and Overflow-y: This property specifies how to change the overflow of elements. x deals with horizontal edges and y deals with vertical edges.
Example:

<!DOCTYPE>
<html>
   <head>
      <style>
         p {
         width:120px;
         height:100px;
         border:1px solid;
         overflow-x:scroll;
         overflow-y:hidden;
         }
      </style>
   </head>
   <body>
      <h2>
         GEEKSFORGEEKS
      </h2>
      <p>
         The CSS overflow controls big content.
         It tells whether to clip content or to add scroll bars.
      </p>
   </body>
</html>

Output:

My Personal Notes

Related Articles