In certain situations an element's content may overflow its box, ending up being partially or completely invisible or perhaps fully visible buy covering another box's content. Some situations when overflowing might occur include:

  • a block-level box being too wide for its containing block, either by having its width set too long or due another reason;
  • an elements height being too large exceeding its containing block;
  • a descendant box being positioned as absolute outside its box;
  • a descendant box having negative margins;
  • a text or line box being unable to break or being positioned outside its boxes (i.e. by using text-indent property);
  • etc...

The overflow property specifies whether a box is clipped to its padding edge and whether scrolling bars are provided to access the clipped content.

The overflow property contains following information:

  1. value: visible, hidden, scroll, auto or inherit;
  2. initial: visible;
  3. applies to: block containers;
  4. inherited: no;
  5. percentages: N/A;
  6. media: visual;
  7. computed value: as specified.

The value visible ensures that the overflowing element is not clipped; instead it might be rendered outside the box. The opposite from the value visible is the value hidden which makes sure that the element gets clipped. This value also removes the scrolling interfaces that otherwise would have been rendered automatically if the value is set to auto or regardless if the value is set to scroll. Although the value scroll rendering depends on the browsers, the practice is to make the scrolling interface visible, even if the content is not overflowing. Such a setting might be visually unattractive but prevents the scrolling bars from appearing or disappearing when the content overflows and the value is set to auto.

When the scrolling element is rendered as side scroll bars (usual setup for visual media) the bars should be inserted between the inner border edge and the outer padding edge.


CSS elements overflowing example:


›› go to examples ››