Box
overflow
overflow decides what to show when the content does not fit in the box: let it spill out, clip it away, or make it scrollable.
Syntax
[ visible | hidden | clip | scroll | auto ]{1,2}Preview
Shorthand breakdown
overflowCode
.box {
overflow: visible;
}Controls
About
Writing the value
visible: shows the overflowing content outside the box as is. This is the initial value.hidden: clips everything outside the box. Users cannot scroll it, but JavaScript can.clip: clips likehidden, but not even JavaScript can scroll it.scroll: always shows scrollbars, even without overflow. Where scrollbars are overlaid on the content, as on macOS, they only appear while scrolling.auto: shows scrollbars only when the content overflows. This is the usual choice.
Setting each direction
With two values, the first is horizontal (overflow-x) and the second is vertical (overflow-y). If one is visible or clip and the other is hidden, scroll or auto, visible becomes auto and clip becomes hidden. You cannot let one direction spill out while the other scrolls.
In this page's preview, a long URL with no break points overflows sideways and the text is taller than the box. With hidden, scroll or auto, drag the handle at the bottom right of the box to change how much overflows (visible and clip boxes have no handle).
hidden boxes catch position: sticky
Boxes with hidden, scroll or auto count as scroll containers, so a position: sticky element inside sticks to that box instead of the page. To clip the overflow and keep sticky working, use clip.