Overflow

Description:
This property specifies the behavior that occurs when an element’s content overflows the element’s box.

The default behavior is to make the overflowing content visible, but it can be changed so that the content is clipped to the confines of the element’s box, optionally providing a mechanism for scrolling the content.

If the overflow property is applied to the body or html elements in an HTML document, the user agent may apply it to the viewport.

Example:
This style rule makes the pre element type in HTML generate a fixed-sized box with visible scrollbars:
pre {
  width: 40em;
  height: 20em;
  overflow: scroll;
}

Example:
This style rule makes the pre element type in HTML generate a fixed-sized box with the horizontal scrollbar hidden:
pre {
  width: 40em;
  height: 20em;
  overflow:auto;
  overflow-x:hidden;
}

Value:

auto:
The behavior of auto isn’t specified in any detail in the CSS2.1 specification. In existing implementations it provides scrollbar(s) when necessary, but it doesn’t show scrollbars unless the content overflows the element’s box.

hidden:
hidden causes content that overflows the element’s box to be clipped. No scrolling mechanism will be provided, so the overflow will be invisible and inaccessible.

scroll:
scroll clips overflowing content, just like hidden, but provides a scrolling mechanism so that the overflow can be accessed. This scrolling mechanism is present whether the content overflows the element’s box or not, to prevent it from appearing and disappearing in a dynamic layout. When the output medium is print, this value allows overflowing content to be printed (as if the value were visible).

visible:
visible allows overflowing content to be visible. It will be rendered outside the element’s box, and may thus overlap other content.