Overflow in CSS

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

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 ;
}

Overflow in CSS Picture 1Overflow in CSS Picture 1
The overflow is still displayed

overflow: hidden

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

 div { 
overflow : hidden ;
}

Overflow in CSS Picture 2Overflow in CSS Picture 2
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 ;

}

Overflow in CSS Picture 3Overflow in CSS Picture 3
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

4 ★ | 1 Vote