What is css overflow property? Why we need to use css overflow property? When we develop web pages, sometimes, we need to display text on a scrollable limit area. The simple solution is to set a specific height for the ‘div’ and add the CSS property overflow: auto to the div tag. So when there is more content than the specified height, scroll bar will appear for the div area.
CSS Overflow property values
What are the css overflow property values and what they do. The overflow property has the following values:
1) visible: This is the default value of the overflow property. The overflow is not clipped. It renders outside the element’s box.
2) hidden: The overflow is clipped, and the rest of the content will be invisible. Scroll bar will not be seen, so not able to scroll.
3) scroll: The overflow is clipped, a scroll-bar is added to see the overflowing content.
4) auto: If overflow is clipped, a scroll-bar should be added to see the rest of the content.
5) inherit: Specifies that the value of the overflow property should be inherited from the parent element. This value hardly useful and in the most case, we should choose another option because it isn’t supported in Internet Explorer 7 and the earlier version. In IE 8, we must add ‘ !DOCTYPE’ at beginning of html webpage to make overflow: inherit to work.
How to use the css overflow property
.scroll{
overflow: visible|hidden|scroll|auto|inherit; /*values for overflow property*/
}
The above code shows how to use the css overflow property. If we want to add both vertical and horizontal scroll for your content wrap, the following way we can use the css. Both scroll bar will appear based on the content.
.scroll-xy{
overflow: auto; /*both x and y scroll will appear*/
}
When you want to disable or enable vertical or horizontal scroll, the following code can be used
.scroll{
overflow-x: auto|hidden; /*Horizontal scrollbar*/
overflow-y: auto|hidden; /*Verical scrollbar*/
}
When you want to target IE8 browser you have to use the vendor prefix as the following.
.scroll{
-ms-overflow-x: auto|hidden; /*IE 8 horizontal scrollbar*/
-ms-overflow-y: auto|hidden; /*IE 8 vertical scrollbar*/
}
CSS Overflow Demos
