How does intrinsic sizing work?

Briefing

A flex item containing a long string blows out of its container even though it has width: 100% and overflow: hidden. Why won't it shrink?

min-content, max-content, fit-content, and the `min-width: auto` rule that makes flex items refuse to shrink.

Laboratory

CSS Lab

Level

DEVELOPER

Estimated time

8 minutes

Method

interactive

Variables under observation

min-contentmax-contentfit-contentautomatic minimum sizeflexbox