When content exceeds an element’s fixed height or width, it can render outside the box and overlap later content. The overflow property decides whether that content remains visible, is clipped, or becomes scrollable. section 3.3.1
Choose the value according to the interaction you want:
- visible keeps overflowing content visible; it is the default. section 3.3.1
- hidden clips content beyond the padding area; normal user scrolling cannot reveal it, though JavaScript can scroll the element. section 3.3.1
- clip clips content like hidden but also disables programmatic scrolling. section 3.3.1
- scroll always provides scrollbars, even when the content currently fits. section 3.3.1
- auto provides scrollbars only when the content overflows, making it the usual choice for conditional scrolling. section 3.3.1
Figure 3.11 Overflow from left to right: visible, hidden, scroll, and auto
Compare visible, hidden, scroll, and auto on containers with overflowing content. section 3.3.1
Use overflow-x and overflow-y when only one axis needs control. Long URLs can create horizontal overflow, while tables may exceed a narrow mobile viewport. Avoid mixing hidden on one axis with another value on the other; use clip when that combination produces unpredictable behavior. section 3.3.1
Locking the page behind a modal
Apply overflow: hidden to the body while a modal is open, then remove it when the modal closes. A no-scroll class keeps the state change simple: body.no-scroll { overflow: hidden; }. The same principle can also prevent margins inside a container from collapsing outward when overflow is set to auto or another value besides visible. section 6.1.2 section 3.5.3
For a sliding dropdown, overflow: hidden hides the drawer while its height is zero. However, height cannot transition directly from 0 to auto; JavaScript must read scrollHeight, set the rendered pixel height when opening, and restore zero when closing. section 15.4
