Sample: Scroll a Block of Code (Extended Version)

11.1 Overflow and clipping

Generally, the content of a block box is confined to the content edges of the box. In certain cases, a box may overflow, meaning its content lies partly or entirely outside of the box, e.g.:

• A line cannot be broken, causing the line box to be wider than the block box.
• A block-level box is too wide for the containing block. This may happen when an element's "width" property has a value that causes the generated block box to spill over sides of the containing block.
• An element's height exceeds an explicit height assigned to the containing block (i.e., the containing block's height is determined by the "height" property, not by content height).
• A descendent box is positioned absolutely [p. 130] , partly outside the box. Such boxes are not always clipped by the overflow property on their ancestors.
• A descendent box has negative margins [p. 97] , causing it to be positioned partly outside the box.
• The "text-indent" property causes an inline box to hang off either the left or right edge of the block box.

Whenever overflow occurs, the "overflow" property specifies whether a box is clipped to its content box, and if so, whether a scrolling mechanism is provided to access any clipped out content.