 CSS overflow

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.^[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.^[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.^[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.