Skip to content
Related Articles

Related Articles

Improve Article

CSS | Overflow

  • Difficulty Level : Basic
  • Last Updated : 30 Jun, 2021

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
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :