Menu
Box Model & Layout
CSS Overflow
Handle content that is too big to fit.
1Overflow Properties
Visible (default), hidden, scroll, or auto.
Example Code
css
div {
width: 100px;
height: 100px;
overflow: scroll; /* Adds scrollbars */
}2Understand it in a real interface
Overflow decides how content outside a box is displayed or scrolled. Hiding it can be appropriate for a decorative crop, but it can also conceal text, focus outlines, menus, and shadows. Fix the content or sizing issue first when a whole page unexpectedly overflows.
3Try it yourself
Place a long word, a wide image, and several lines of text in a small panel. Compare visible, hidden, and auto overflow. Decide which content should wrap, which image should scale, and which region actually needs an independent scrollbar.
Finished reading?
Mark this topic as complete to track progress.