Skip to content
Related Articles
Open in App
Not now

Related Articles

CSS | Overflow

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 30 Jun, 2022
Improve Article
Save Article

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: 
 

html




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

html




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

html




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

html




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

html




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

 

Supported Browser:

  • Google Chrome 1
  • Edge 12
  • Internet Explorer 4
  • Firefox 1
  • Opera 7
  • Safari 1

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!