Overflow in CSS

The CSS overflow feature determines how content will display when it is too large for a given frame.

CSS Overflow

The overflow feature indicates whether to cut the content or add a scroll bar to the element's content when it is too large for a predetermined area.It has the following values:

1. visible - by default, the overflow is not cut but displayed out of the element box.
2. hidden - the overflow is cut and hidden.
3. scroll - the overflow is cut but there is a scroll bar to view the rest of the content.
4. auto - if the overflow is cut, there is a scroll bar to view the rest of the content.

Note: The overflow feature is only used with block elements that have a predefined height.On OS X Lion, the default scroll bar is hidden, shown only when used.

overflow: visible

By default, overflow is set to visible, meaning that it will not be cut and displayed outside the box.

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

The overflow is still displayed

overflow: hidden

When using the hidden value, the overflow will be cut and hidden.

 div { 
  overflow :  hidden ; 
 } 

The overflow is hidden behind the predefined size frame

overflow: scroll

When the scroll value is set, the overflow will be cut and placed in a new scroll bar.Note that there will be both horizontal and vertical scroll bars (even if you don't need it).

 div { 
 
 overflow :  scroll ; 
 
 } 

Scroll bar to see the rest of the content

overflow: auto

The auto value is similar to scroll, only that will add a scroll bar when needed.

 div { 
  overflow :  auto ; 
 } 

overflow-x and overflow-y

Overflow-x and overflow-y properties are used to determine whether the overflow will be displayed horizontally, vertically or both.

 div { 
  overflow-x :  hidden ; /* Hide horizontal scrollbar */ 
  overflow-y :  scroll ; /* Add vertical scrollbar */ 
 } 

Previous article: Location of elements in CSS

Lesson: Float in CSS