CSS Layout - Overflow
overflow property controls what
happens to content that is too big to fit into an area.
Try it Yourself »
overflow property specifies whether to clip content or
to add scrollbars when the content of an element is too big to fit in a specified
overflow property has the following values:
visible- Default. The overflow is not clipped. It renders outside the element's box
hidden- The overflow is clipped, and the rest of the content will be invisible
scroll- The overflow is clipped, but a scrollbar is added to see the rest of the content
auto- If overflow is clipped, a scrollbar should be added to see the rest of the content
overflow property only works for block elements with a specified height.
Note: In OS X Lion (on Mac), scrollbars are hidden by default and only shown when being used (even though "overflow:scroll" is set).
By default, the overflow is
visible, meaning that it is not clipped and it
renders outside the element's box:
hidden value, the overflow is clipped, and the rest of the content is hidden:
Setting the value to
scroll, the overflow is clipped and a scrollbar is added to scroll inside the box. Note that this will add a scrollbar both horizontally and vertically (even if you do not need it):
auto value is similar to
scroll, only it add scrollbars when necessary:
overflow-x and overflow-y
overflow-y properties specifies
whether to change the overflow of content just horizontally or vertically (or
overflow-x specifies what to do with the left/right edges of the
overflow-y specifies what to do with the top/bottom edges of the
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
Test Yourself with Exercises!
All CSS Overflow Properties
|overflow||Specifies what happens if content overflows an element's box|
|overflow-x||Specifies what to do with the left/right edges of the content if it overflows the element's content area|
|overflow-y||Specifies what to do with the top/bottom edges of the content if it overflows the element's content area|