Why does width: 100% overflow?

Briefing

A child with width: 100% sits inside a parent of fixed width, and a horizontal scrollbar appears. Where did the extra pixels come from?

The child was told to be exactly as wide as its parent. It is now wider than its parent. Both are correct.

Laboratory

CSS Lab

Level

CURIOUS

Estimated time

6 minutes

Method

interactive

Variables under observation

box modelbox-sizingcontaining blockpercentage resolution