layout
overflow
Determines what happens when content exceeds its box's boundaries. Setting overflow to anything but visible creates a new block formatting context.
overflow: visible | hidden | clip | scroll | autoCommon values
| Value | Effect |
|---|---|
| visible | Default; overflowing content is drawn outside the box |
| hidden | Clips overflow and hides scrollbars |
| clip | Like hidden but disables all scrolling (even programmatic) |
| scroll | Always shows scrollbars, even if not needed |
| auto | Adds scrollbars only when content overflows |
Examples
.card { overflow: hidden; border-radius: 12px; }Clips child content to rounded corners
.scroll-panel { overflow-y: auto; max-height: 300px; }Vertical scrollbar appears only when needed
pre { overflow-x: auto; }Horizontal scroll for wide code blocks
Gotcha
overflow: hidden on the body can break position: sticky descendants because sticky needs a scrolling ancestor.
Related properties
display
Sets whether an element is treated as a block or inline box and defines the layout used for its children. It is the single most important property for controlling how boxes participate in the flow.
position
Controls how an element is positioned in the document and whether it participates in normal flow. Non-static values enable top/right/bottom/left offsets and create a positioning context.
max-width
Caps how wide an element can grow, overriding width when the two conflict. Essential for readable line lengths and responsive containers.
border-radius
Rounds the corners of an element's border box. Values can be lengths or percentages, and the slash syntax lets you set different horizontal and vertical radii for elliptical corners.
box-sizing
Controls whether an element's declared width and height include padding and border. border-box is the modern default most stylesheets set globally.