CSS Layout - Overflow
The CSS overflow property is used to control how content that overflows the element's box is displayed.
The text content here is scrollable, with the scrollbar in the vertical direction.
The text content here is scrollable, with the scrollbar in the vertical direction.
The text content here is scrollable, with the scrollbar in the vertical direction.
The text content here is scrollable, with the scrollbar in the vertical direction.
The text content here is scrollable, with the scrollbar in the vertical direction.
The text content here is scrollable, with the scrollbar in the vertical direction.
CSS Overflow
The CSS overflow property controls the addition of scrollbars within the element's area when content overflows the element's box.
The overflow property has the following values:
| Value | Description |
|---|---|
| visible | Default. The content is not clipped and will be displayed outside the element's box. |
| hidden | The content is clipped, and the rest of the content is invisible. |
| scroll | The content is clipped, but a scrollbar is added to see the rest of the content. |
| auto | A scrollbar is added to see the rest of the content if the content is clipped. |
| inherit | Specifies that the overflow property should be inherited from the parent element. |
Note: The overflow property only works on block elements with a specified height.
Note: On OS X Lion (Mac system), scrollbars are hidden by default and only appear when in use (setting "overflow:scroll" has the same effect).
overflow: visible
By default, the overflow value is visible, meaning the content overflows the element's box:
The text content here overflows the element's box.
The text content here overflows the element's box.
The text content here overflows the element's box.
The text content here overflows the element's box.
The text content here overflows the element's box.
The text content here overflows the element's box.
The text content here overflows the element's box.
Example
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;
}