box-sizing & Overflow
Two properties control how boxes behave at their edges: box-sizing decides whether padding and borders are included in an element's width, and overflow decides what happens when content is too big for its box.
content-box vs border-box
content-box(the default):widthis the content only; padding and border are added.border-box:widthincludes padding and border; the content shrinks to fit.
border-box is far more intuitive — a 50%-wide column with padding stays 50% wide — so nearly every project applies it globally:
*,
*::before,
*::after {
box-sizing: border-box;
}
Why it matters for layouts
Overflow
When content doesn't fit — a fixed height, a long word, a wide image — it overflows. The overflow property controls what happens:
| Value | Behaviour |
|---|---|
visible | Content draws outside the box (default) |
hidden | Clipped; still scrollable by script |
clip | Clipped with no scrolling at all |
scroll | Always shows scrollbars |
auto | Scrollbars only when needed — usually the best choice |
overflow-x and overflow-y control each direction separately — for example, a horizontally scrolling table wrapper (overflow-x: auto).
Text overflow and ellipsis
The single-line ellipsis needs all three properties. Multi-line clamping uses line-clamp (with the long-standing -webkit- prefixed form for compatibility).
Long words and URLs
overflow-wrap: anywhere lets long strings break where necessary; hyphens: auto hyphenates words properly (the element needs a lang attribute).
Scroll containers and stacking
Setting overflow to anything other than visible turns an element into a scroll container. This clips children such as dropdown menus and tooltips, and it breaks position: sticky for elements inside. If a menu is mysteriously cut off, look for an ancestor with overflow: hidden. In newer browsers, overflow: clip clips without creating a scroll container.