The overflow property tells the browser how to handle content that exceeds the physical bounds of its container element. For example, you might have a box that is set to 300x300 pixels, with an image inside that is 500x500 pixels. In standard HTML, the image would display the entire 500x500 pixels. With the CSS 2 overflow property, you can add scroll bars, cut the image off, or let it display as it normally would.
overflow in CSS Versions:
overflow: visible | hidden | scroll | auto | inherit
The content is not clipped and can be seen outside the box.
The content is clipped and cannot be seen.
The content is clipped, but scrollbars are displayed to show the missing content.
If there is extra content, scrollbars will be shown, and if there is not, no scrollbars will display.
The element should have the same value as the parent element.
overflow Browser Support:
overflow Initial/Default Value:
overflow Applies To:
This property is not inherited.
overflow Media Type:
Standard overflow property
<p style="clip: rect(5px 100px 30px 5px); overflow:scroll;">
This paragraph will be clipped into a rectangle, but the contents will be scrollable. </p>
Setting the overflow on a div element
<div style="overflow:auto; width:300px; height:200px;">
... DIV contents