CSS Overflow


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

image.png

 Try It! 


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:

ValueDescription
visibleDefaults. The content will not be trimmed and will appear outside the element box.
hiddenThe content will be trimmed, and the rest of the content will be invisible.
scrollThe content will be trimmed, but the browser will display a scroll bar to view the rest of the content.
autoIf the content is trimmed, the browser will display a scroll bar to view the rest of the content.
inheritSpecifies 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 as for setting "overflow:scroll").

overflow: visible

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

image.png

Example

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

 Try It!