Capstone: a card that survives real content
Every layout in this module was built against text you picked yourself.
[email protected] fits anywhere. Then the export from the real system lands, one
address turns out to be 42 characters with no spaces in it, and the card in the
preview is split open - the text column has shoved itself out past the border
and kept going.
Nothing errored. This is the same CSS that was correct an hour ago. Only the
data changed.
The rule doing it is a default you have never had to think about. Every flex
item has min-width: auto, and on a flex item auto does not mean zero - it
means "never let me get narrower than my own content". A paragraph's own
content is its longest unbreakable run. Normally that is one ordinary word, a
few pixels wide, so the rule costs you nothing and you never learn it exists.
But a browser will not break a line at a dot or at an @, and this address has
no hyphen in it either - so all 42 characters are a single unbreakable run.
.who digs in at exactly that width, the card's arithmetic stops adding up,
and the browser draws the overflow rather than mentioning it.
Two separate things are wrong here, and fixing one still leaves a broken page.
The column has to be allowed to shrink to its share, and the address has to be
allowed to break. Fix only the first and the column snaps to the right width
while the text keeps running out over the border - which looks exactly like your
fix did nothing.
Your task: make the email wrap inside the card. Leave the address alone and
leave the card's width alone - the next address will only be longer.
You'll practice:
- Reading
min-width: auto as the flex default meaning "never shrink below my content"
- Fixing the layout instead of the data, so the next long value lands harmlessly
Related reading: When a Flex Item Won't Shrink: the min-width Floor →