= CSS overflow
{c}
<CSS overflow> concerns content or painting extending beyond a box's assigned region and the properties controlling its clipping and scrolling. The distinction between the box's size and the extent of its contents is essential: restricting a box does not necessarily make every descendant smaller.<CSS Overflow Module Level 3 by World Wide Web Consortium>[§2, Overflow Concepts and Terminology]{ref}
For example, a zero-padding container has content width $100$ <CSS pixels>, while a child has width $150$ pixels and begins at its left edge. The child extends fifty pixels beyond the container. The container's declared width can remain $100$ even when more of the child is painted.
With both axes set to `overflow: visible`, overflow is not clipped by that property. `overflow: hidden` clips and does not expose ordinary scrolling controls, but can still permit programmatic scrolling. `overflow: clip` forbids scrolling altogether and does not create a <CSS scroll container>. `overflow: auto` supplies scrolling behavior when needed under its rules.<CSS Overflow Module Level 3 by World Wide Web Consortium>[§3.1, visible, hidden, clip and auto definitions]{ref}
These choices can also affect layout. On an applicable block box, scrollable overflow values establish an independent formatting context. The non-scrollable `clip` value alone does not; `display: flow-root` can separately establish a <CSS block formatting context>. A request to clip and a request to isolate formatting consequently need not be the same declaration.<CSS Overflow Module Level 3 by World Wide Web Consortium>[§3.1, clip versus hidden and independent formatting contexts]{ref}
<CSS overflow> does not delete overflowing <DOM nodes>. Clipped content can still exist in the document, and a scrollbar is not a replacement for checking whether important information remains accessible in the intended medium. Also distinguish a glyph or shadow painting beyond its nominal bounds from a larger scrollable content region; the specification defines ink and scrollable overflow separately.
Back to article page
