How to use css overflow style property, there are four overflow properties in css, like overflow scroll, overflow auto, overflow visible, overflow hidden.
.myDiv { overflow: scroll; }
There are different overflow properties, let’s learn with example.
Overflow property indicates what will happen if content overflows any defined container size, means contents needs more space to fit.
Overflow CSS property indicates whether to clip content or to add scrollbars,
There are different options for overflow property
overflow : scroll, auto, visible, hidden
Here is an example of CSS overflow syntax.
div { width: 200px; height: 50px; background-color: #eee; overflow: scroll; }
this is how you can define overflow property value in CSS
div { overflow: auto; } div { overflow: scroll; } div { overflow: visible; } div { overflow: hidden; }
When property value is scroll, then a scrollbar is added, so you can scroll to see the full content
overflow: scroll ExampleThis is an example of overflow:scroll, as you can see the scroll bar appearing on both the side
When property value is auto, then a scrollbar will only appear when the content full
overflow: auto ExampleThis is an example of overflow:auto, as you can see the scroll bar not appearing on both the side, but when the context is full the scroll bar will appear, you must specify some width and or height of container to see the effect
This is Default value. It will push content outside the container (html element)
This is an example of overflow:visible, Now if you notice the content is going outside the specified box
Content outside the container will not be invisible
We can also specify overflow property for X axis and Y axis, look at the example below
div { overflow-x: hidden; /* Hide horizontal scrollbar */ overflow-y: scroll; /* Add vertical scrollbar */ }
Whenever you use this css overflow style to display any content inside div tag, make sure to apply appropriate padding and margin for that div, otherwise content appearance may look dirty.