Skip to content
Related Articles

Related Articles

CSS | Overflow

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 30 Jun, 2022
View Discussion
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
Recommended Articles
Page :

Start Your Coding Journey Now!