- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Working with CSS Overflow Property
CSS overflow property comes in handy when the user wants to display a larger content in a smaller container without resizing the content. This property allows user to clip content, provide scrollbars to view clipped content, render content outside the container thus the name overflow.
Syntax
Following is the syntax for CSS Overflow property −
Selector { overflow: /*value*/ }
Following are the values for CSS Overflow property −
Sr.No | Value & Description |
---|---|
1 | visible It is the default value, content is not clipped and is rendered outside the element's box, and thus the property name overflow |
2 | hidden It clips the content that overflows the element's box, clipped content is not visible |
3 | scroll It clips the content that overflows the element's box, clipped content is visible as scrollbars are also rendered along with the content |
4 | auto It will automatically render the scrollbars to see the overflowed content |
Let’s see an example of the CSS overflow property −
Example
<!DOCTYPE html> <html> <head> <title>CSS Overflow</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } input[type="button"] { border-radius: 10px; } #containerDiv { margin: 0 auto; height: 100px; width: 100px; overflow: auto; } </style> </head> <body> <form> <fieldset> <legend>CSS Overflow</legend> <div id="containerDiv"> <img id="image" src="https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg"> </div> <input type="button" onclick="fitHeight()" value="Remove Scrollbars"> </fieldset> </form> <script> var divDisplay = document.getElementById("divDisplay"); var imgSelect = document.getElementById("image"); var containerDiv = document.getElementById("containerDiv"); function fitHeight() { containerDiv.style.height = imgSelect.height+'px'; containerDiv.style.width = imgSelect.width+'px'; containerDiv.style.overflow = 'hidden'; } </script> </body> </html>
Output
Before clicking any button −
After clicking ‘Remove Scrollbars’ button −
Let us see another example for CSS overflow property −
Example
<!DOCTYPE html> <html> <head> <title>CSS Overflow</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } input[type="button"] { border-radius: 10px; } #containerDiv { margin: 0 auto; height: 110px; overflow: scroll; } </style></head> <body> <form> <fieldset> <legend>CSS Overflow</legend> <div id="containerDiv"> This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.</div> <input type="button" onclick="add()" value="Remove Scrollbars"> </fieldset> </form> <script> function add() { document.querySelector('#containerDiv').style.overflow = "hidden"; } </script> </body> </html>
Output
Before clicking ‘Remove Scrollbars’ button −
After clicking ‘Remove Scrollbars’ button −
- Related Articles
- CSS text-overflow property
- Working with CSS Display Property
- Values of CSS overflow property
- CSS overflow: visible
- CSS overflow: hidden
- CSS overflow: scroll
- CSS overflow: auto
- CSS overflow-y
- CSS overflow-x
- Working with Inline CSS
- Working with CSS Units
- Working with element for CSS
- Working with CSS Pseudo Classes
- Display Inline Working with CSS
- Text Indentation Working with CSS

Advertisements