CSS 2.1 Reference: overflow Property

The overflow property is used to specify how elements, which overflow their containing elements, should be managed. This property is specified for the containing element. See CSS Box Model for information concerning the boxes that are generated for elements.

This property is specified by using a keyword according to the syntax shown above.

CSS Example: The overflow properties are set to 4 different keyword values.

  #tst1 {overflow: hidden;}
  #tst2 {overflow: visible;}
  #tst3 {overflow: scroll;}
  #tst4 {overflow: auto;}

• visible - The content is allowed to overflow without clipping.
• hidden - Overflowing content will be clipped to the outside edge of the element's padding box area.
• scroll - Overflowing content will be clipped to the outside edge of the element's padding box area. Scroll bars (or some scrolling mechanism) will be displayed to allow clipped areas to be viewed. The scroll bars will be visible whether or not the content overflows the containing element.
• auto - Overflowing content is handled automatically by the browser. Scroll bars (or some scrolling mechanism) will be displayed if needed.
• inherit - The inherit keyword is used to specify that the value for this property should be taken from the parent element. If inherit is used with the root element, then the initial value for this property will be used.