CSS Overflow Property
CSS Layout – Overflow
In this tutorial we will learn the Overflow of CSS layout, setting the paragraph, sentences and any other contains of container size. we set and apply the overflow CSS property to look outstanding HTML and CSS web pages and web content.
The content usually overflows when the content is bigger than the container of mobile and laptop screen.
In this property (Overflow), we can set the scrolling content with two different block-level elements that is overflow-x and overflow-y.
- The overflow-x CSS property sets when content overflows a block level element’s left and right edges.
- The overflow-y CSS property sets when content overflows a block level element’s top and bottom edges.
Valid Value to use Overflow CSS Property
- visible: Default content is not clipped, overflowing content is rendered outside the box’s edges.
- scroll: Content is clipped if necessary to fit the padding box; browsers will display a scroll bar. Content is scroll.
- hidden: Content is clipped if necessary and invisible. Some content is not visible, that is larger than the container.
- auto: It is an automatic value, when contents fit the padding box it works automatically same as visible value. If contents overflow the padding box it works same as scroll value.
Now you look below the example of overflow-x and overflow-y properties with all valid value. Example with output also.
Example of the Overflow-x CSS Property;
<!DOCTYPE html> <html lang="en"> <head> <title>Overflow-x</title> <style type="text/css"> div{height: 200px; width: 200px; border: 2px solid blue; background: lightgreen;} .auto{overflow-x: auto;} .hidden{overflow-x:hidden;} .scroll{overflow-x:scroll;} .visible{overflow-x:visible;} </style> </head> <body> <div class="auto"><p>Lorem30</p> <p>Lorem20</p> <p>Lorem30</p></div> <div class="hidden"><p>Lorem30</p> <p>Lorem10</p> <p>Lorem20</p></div> <div class="scroll"><p>Lorem30</p> <p>Lorem10</p> <p>Lorem20</p></div> <div class="visible"><p>Lorem30</p> <p>Lorem10</p> </div> </body> </html> |
Output of above programming example;
This is the example of only two value that is scroll and auto.
Programming example output in video for better understanding;
Above you can see the paragraph is scrolling overflow-x edge, that means bottom left to right. But in overflow-y property is scroll in Y Exis, that means Y Exis scroll from top edge to bottom edge. You look the bellow example of Y Exis.
Example of the Overflow-y CSS Property;
Now, you look below the programming examples of overflow-y property.
<!DOCTYPE html> <html lang="en"> <head> <title>Overflow-y</title> <style type="text/css"> div{height: 200px; width: 200px; border: 2pxsolid blue; background: lightgreen;} .auto{overflow-y: auto;} .hidden{overflow-y:hidden;} .scroll{overflow-y:scroll;} .visible{overflow-y:visible;} </style> </head> <body> <div class="auto"><p>Lorem30</p> <p>Lorem10</p> <p>Lorem20</p></div> <div class="hidden"><p>Lorem30</p> <p>Lorem10</p> <p>Lorem20</p></div> <div class="scroll"><p>Lorem30</p> <p>Lorem20</p> <p>Lorem20</p></div> <div class="visible"><p>Lorem30</p> <p>85175957585245957552759518541 6587456987452315698748548451</p> </div> </body> </html> |
Output of above programming example in image and video both;
Above programming output, you can see the paragraph container is overflow-y, from top edge to bottom edge.
Programming example output in video for better understanding;
If you use the auto valid value that time output is different, you see both side scrolling overflow-x and overflow-y both are show in a paragraph.
Show bellow output of auto valid value of CSS Overflow property;
CSS Overflow Property
The overflow CSS property is a shorthand for the overflow-x and overflow-y CSS properties.
Here we define and show you programming example of one or two value property. We can use one or two value in a single container, how you can use this value look at the below programming example for better understanding.
It can have one or two value;
- When one value is specified, the value applies to both overflow-x and overflow-y properties.
Look the example of One Value Property;
<!DOCTYPE html> <html lang="en"> <head> <title>Overflow One Value</title> <style type="text/css"> .container{overflow: scroll; height: 200px; width: 200px; border: 2px solid blue; background: lightgreen;} .container-2{width: 400px; height: 400px; background: lightblue;} </style> </head> <body> <div class="container"> <div class="container-2"> <p>548854871285175295175395274185 2963789456129575386386425242572</p> <p>Lorem20</p> <p>Lorem10</p> <p>8415295275285142962427462285 20415242529542</p> <p>Lorem30</p> <p>Lorem20</p> <p>Lorem20</p></div> </div> </body> </html> |
Output of above programming example;
Above you can see the output of programming, we used in this programming only one value, so it has both value ser shown overflow-x and overflow-y property.
-
When two value is specified, the first value applies to the overflow-x property while the second value applies to the overflow-y property.
Look the programming example below for better understanding.
Example of Two Value Property;
<!DOCTYPE html> <html lang="en"> <head> <title>Overflow Two Value</title> <style type="text/css"> .container{overflow: scroll hidden; height: 200pxp width: 200px; border: 2px solid blue; background: lightgreen;} .container-2{width: 400px; height: 400px; background: lightblue;} </style> </head> <body> <div class="container"> <div class="container-2"> <p>548854871285175295175 3952741852963789456129575 386386425242572</p> <p>Lorem30</p> <p>Lorem10</p> <p>2328898451269885274185265 4987654325245674185396527539 627538462951753952</p> <p>Lorem20</p> <p>Lorem30</p> <p>Lorem20</p></div> </div> </body> </html> |
Output of above programming example;
You can see the above output of programming example, the overflow-y is not working, it is hidden and the overflow-x is working, it is scrolling, it is because in programming we use two values scroll and hidden, so scroll is applied in overflow-x property and hidden value is applied on overflow-y property of the container.
So, in this tutorial you learned CSS Overflow property, how to set and applies overflow-x and overflow-y property, valid value to applies the property and you also saw the one or two value of overflow property. You read all the property with programming example with output also.
I hope you learned better this tutorial and learn something new. If you have any doubt from this tutorial ask in the comment section.
Read Also-
- Learn all Tutorial of HTML with programming examples.
- Learn how to make Animation Circle Ring with HTML and CSS.
- Learn GK for Competitive Exam, (UPSC, Railway, SSC, PBSC) etc.
- Read all Tutorial of CSS with programming examples.
- Create Stylish Contact Form with HTML and CSS.
2 Comments
Kritika · April 5, 2022 at 3:49 pm
Helpful to learn CSS Overflow property.
Studymuch.in is fantastic website.
Kayıt Ol · May 1, 2023 at 8:20 pm
I am sorting out relevant information about gate io recently, and I saw your article, and your creative ideas are of great help to me. However, I have doubts about some creative issues, can you answer them for me? I will continue to pay attention to your reply. Thanks.