Web Design in a Nutshell, 3rd Edition

There are four values for the overflow property:

visible

The default value is visible, which allows the content to display outside its element box.

hidden

When overflow is set to hidden, the content that does not fit in the element box gets clipped and does not appear beyond its edges.

scroll

When scroll is specified, scrollbars (or an alternate scrolling mechanism) are added to the element box to allow scrolling through the content while keeping the content visible in the box area only. Be aware that the scroll value causes scrollbars to be rendered even if the content fits comfortably in the content box.

auto

The auto value allows the user agent to decide how to handle overflow. In most cases, scrollbars are added only when the content doesn’t fit and they are needed.

Figure 21-11 shows examples of each of the overflow values as applied to an element that is 150 pixels square. The gray background color makes the edges of the content area clear.

Figure 21-11. Overflow values