Why does width: 100% overflow?
The child was told to be exactly as wide as its parent. It is now wider than its parent. Both are correct.
- Level
- CURIOUS
- Read time
- 06 min
- Experiment
- Available
- Type
- INTERACTIVE
The question
A child with width: 100% sits inside a parent of fixed width, and a horizontal scrollbar appears. Where did the extra pixels come from?
Hypothesis
width sets the content box by default. Padding and border are added *after*, so 100% + any padding is always larger than the parent's content box.
Method
Laboratory available
The instrument for this investigation runs in the laboratory, where the controls, the live model and the observation log share one workstation.
Enter the laboratoryDrag the padding, border and width controls. The bench reports the used dimensions of every box edge and whether overflow occurs.
What we observed
With the default box-sizing: content-box, the rendered width is width + padding-left + padding-right + border-left + border-right. Setting box-sizing: border-box makes width describe the border box instead, and padding is taken out of the inside.
Why it happens
.parent { width: 320px; } /* content box: 320px */.child { width: 100%; /* → 320px of content */ padding: 0 16px; /* + 32px */ border: 1px solid; /* + 2px */ /* used border-box width: 354px → 34px of overflow */}Margins are a separate story: they are never part of width, so width: 100% plus any horizontal margin always overflows, regardless of box-sizing.
| Situation | Result |
|---|---|
| content-box + padding | Overflows by the padding + border |
| border-box + padding | Fits; content area shrinks instead |
| Any box-sizing + horizontal margin | Overflows by the margin |
width: auto on a block | Fits automatically, the box solves for you |
| Replaced element (img) at 100% | Fits if max-width: 100% and no extra padding |
Further research
The second most common source of mystery overflow is a scrollbar. In classic scrollbars, 100vw includes the scrollbar gutter while 100% of <body> does not, so width: 100vw on a page that scrolls vertically produces exactly one scrollbar's worth of horizontal overflow. scrollbar-gutter: stable and the dvw/svw units exist because of this.
References
- 01MDNbox-sizing
- 02W3CCSS Box Sizing Module Level 3
- 03MDNContaining block