Intrinsic Sizing in Practice
\nLet content decide how big things are: min-content, max-content, fit-content and the math functions that replace half your media queries.
\nWaypoint’s session abstracts had the classic pair of rules: width: 100% plus max-width: 40ch, and then a media query to add side padding on phones, and another for big screens. Three rules and two breakpoints to say one thing: “be as wide as is comfortable to read, but never wider than the space you have”.
CSS can say that directly now. This lesson covers two tools: the intrinsic size keywords, which let content decide how big an element is, and the math functions min(), max() and clamp(), which let you describe a range instead of picking breakpoints.
Most sizes you write are extrinsic: 300px, 50%, 1fr. The browser can also size an element from its content, and three keywords expose that:
\nmin-content: the narrowest the element can be without overflowing, which is usually the width of its longest word.max-content: the width the content would take if it never wrapped.fit-content: max-content, but never wider than the available space. When space runs out, it wraps like a normal block.fit-content is the one you’ll use most. A block-level badge or button normally stretches to fill its container; width: fit-content makes it hug its label like an inline element while staying a block, so margins and stacking still behave. Add margin-inline: auto and it centers.
In grid tracks, the keywords give you content-driven columns. Waypoint’s agenda uses grid-template-columns: max-content 1fr: the time column is exactly as wide as the longest time (“10:15–11:00”), and the session title takes the rest.
The math functions take a list of values, in any mix of units, and resolve to one length at layout time:
\n.abstract {\n width: min(100%, 40ch); /* ceiling: never wider than 40ch */\n}\n\n.page {\n padding-inline: max(1rem, 4vw); /* floor: never less than 1rem */\n}\n\n.session-card {\n padding: clamp(12px, 4%, 32px); /* between 12px and 32px, 4% in the middle */\n}\n\n.content {\n width: min(100% - 2rem, 60rem); /* arithmetic works without calc() */\n margin-inline: auto;\n}min() returns the smallest value, which means it sets an upper limit. min(100%, 40ch) is 40ch on a wide card and 100% on a narrow one; it replaces the width plus max-width pair with one declaration. max() returns the largest value, so it sets a lower limit: the page gutter is 4vw on wide screens but never shrinks below 1rem on a phone.
clamp(MIN, PREFERRED, MAX) combines both: it returns the preferred value, but never less than MIN and never more than MAX. It’s exactly max(MIN, min(PREFERRED, MAX)).
With clamp(12px, 4%, 32px), a card in a 300px column gets 12px of padding, one in a 500px column gets 20px, and anything wider than 800px tops out at 32px. Padding percentages are relative to the containing block’s inline size, so the card’s spacing follows its container, not the viewport.
The preferred value in clamp() should be something that scales: a percentage, vw, or the container units you’ll meet in Container Queries. The limits should be stable units like px or rem. Using rem for the limits has a bonus: if a user raises their default font size, the limits scale with it.
This is also the trick behind the guard from the grid lesson: minmax(min(180px, 100%), 1fr). Inside a container narrower than 180px, min() picks 100%, so the track never forces overflow.
The exercise has a session card inside a wrapper whose width the checks change. Cap the abstract at 40ch without overflowing narrow cards, make the badge hug its text, and give the card padding that scales between 12px and 32px. Next, you’ll make whole components change layout based on their container’s width, with container queries.
\n","toc":[{"id":"sec-1","text":"Let the content decide: intrinsic keywords","level":2},{"id":"sec-2","text":"min(), max() and clamp()","level":2},{"id":"sec-3","text":"Units that make math functions useful","level":2},{"id":"sec-4","text":"Your turn","level":2}],"takeaways":["min-content is the narrowest an element can be without overflowing, max-content is its width with no wrapping, and fit-content is max-content capped at the available space.","min() picks the smallest value, so it acts as a ceiling: width: min(100%, 40ch) never exceeds 40ch and never overflows its container.","max() acts as a floor, and clamp(MIN, PREFERRED, MAX) keeps a fluid value between two limits.","Math functions accept mixed units and arithmetic, so min(100% - 2rem, 60rem) works without a nested calc()."],"further":[{"title":"clamp() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/clamp"},{"title":"fit-content (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/fit-content"},{"title":"Sizing units (web.dev Learn CSS)","url":"https://web.dev/learn/css/sizing"}],"quiz":[{"q":"A session abstract has width: min(100%, 40ch). Its card is 900px wide. How wide is the abstract?
min() returns the smaller value, not the larger one. It’s easy to mix up because it acts as a maximum."},{"text":"Whichever is smaller, so 40ch (roughly 320px at 16px).","why":"Correct. 40ch is smaller than 900px, so it wins. In a 200px card, 100% would be smaller and win instead."},{"text":"40ch, but it overflows when the card is narrower.","why":"That’s what plain width: 40ch does. With min(), 100% takes over as soon as the card is narrower than 40ch."},{"text":"It depends on the viewport width.","why":"Neither 100% nor ch depends on the viewport; 100% is relative to the containing block."}],"answer":1},{"q":"What does padding: clamp(12px, 4%, 32px) give a card in a 500px-wide container?
A “Sold out” badge is display: block inside a card, and it stretches across the whole card. Which declaration makes it hug its text but still wrap if the text is longer than the card?
width: max-content","why":"max-content never wraps, so a long label would overflow the card."},{"text":"width: min-content","why":"min-content wraps at every opportunity, so a two-word label would break onto two lines."},{"text":"width: fit-content","why":"Correct. It uses the max-content width when there’s room and falls back to the available width when there isn’t."}],"answer":2},{"q":"Why does max(1rem, 4vw) make a good page gutter?
max() picks the larger value, so it acts as a floor of 1rem while 4vw takes over on wider screens."},{"text":"It never grows beyond 1rem, keeping wide screens tidy.","why":"That would be min(1rem, 4vw), which acts as a ceiling."},{"text":"It switches from rem to vw at a breakpoint you declare.","why":"There’s no breakpoint; the browser compares the two values continuously at every width."}],"answer":0}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"Let content decide how big things are: min-content, max-content, fit-content and the math functions that replace half your media queries.
\nLet content decide how big things are: min-content, max-content, fit-content and the math functions that replace half your media queries.
\nThe checks resize .wrap between 220px and 1000px. Without media queries:
.abstract at most 40ch wide, but never wider than the card’s content box..badge hug its text instead of stretching (keep display: block)..session-card padding of 4% of the wrapper’s width, never less than 12px and never more than 32px.min() acts as a ceiling, a keyword makes a block hug its content, and clamp() takes three values.",".abstract { width: min(100%, 40ch); }, .badge { width: fit-content; }, .session-card { padding: clamp(12px, 4%, 32px); }."],"explanation":"width: min(100%, 40ch) resolves to whichever is smaller, so the abstract stops at 40ch in a wide card and shrinks to the content box in a narrow one, where a plain 40ch would overflow. fit-content sizes the badge to its max-content width, capped at the space available, while it stays a block. clamp(12px, 4%, 32px) returns 4% of the containing block’s width (20px at 500px), but never drops below 12px or rises above 32px, so one declaration replaces two breakpoints.