CSS | Overflow - GeeksforGeeks

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.
ysachin2314
CSS-Basics
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?