CSS layout-Overflow

The CSS overflow property is used to control how the content is displayed when it overflows the element box.

CSS Overflow

The CSS overflow property can control the addition of scroll bars in the corresponding element interval when the content overflows the element box.

The overflow property has the following values:

value description
visible Defaults. The content will not be trimmed and will appear outside the element box.
hidden The content will be trimmed, and the rest of the content will be invisible.
scroll The content will be trimmed, but the browser will display a scroll bar to view the rest of the content.
auto If the content is trimmed, the browser will display a scroll bar to view the rest of the content.
inherit Specifies that the value of the overflow attribute 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), the scroll bar is hidden by default and will only be displayed when it is used (the same is true for setting “overflow:scroll”).

overflow: visible

By default, the value of overflow is visible, which means that the content overflows the element box:

The text content here will overflow the element box.

The text content here will overflow the element box.

The text content here will overflow the element box.

The text content here will overflow the element box.

Example

div {
    width: 200px;
    height: 50px;
    background-color: #eee;
    overflow: visible;
}