PHASE 5Beginner ~26 min· topic 5 of 8

Topic 5.5

Width, Height, Min and Max

In one line

A box's size comes either from outside (the space its parent gives it, or a width you set) or from inside (its content); min-*, max-*, the keywords min-content, max-content and fit-content, and aspect-ratio let you mix the two safely.

Think of it like this

Packing a gift. Sometimes you choose the box first and squeeze the gift in (the size comes from outside). Sometimes you wrap the paper tightly around the gift (the size comes from inside, from the gift's shape). Good packers combine both: "wrap it snugly, but never bigger than this shelf, and never smaller than this card." That's fit-content with min-width and max-width.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

Extrinsic sizing: The size comes from outside the box: from its parent or from a width you set.
Intrinsic sizing: The size comes from inside the box: from its content.
min-content: The narrowest the content can be without overflowing (for text, about its longest word).
max-content: The width the content takes if nothing ever wraps.
fit-content: As wide as the content needs, but no wider than the space available.
min-width / max-width: Lower and upper limits on the width. min-width wins if they conflict.
Definite height: A height the browser knows without laying out the content, like height: 300px.
aspect-ratio: A property that keeps the box at a fixed shape, like 16 / 9 or 1 / 1.
Replaced element: An element whose content comes from outside CSS, like an image or a video.

Step by step

01Default: a block fills its parent

A div with width: auto (the default) takes the whole width of its parent, whatever is inside. That's extrinsic sizing.

02Shrink-wrap with fit-content

Set width: fit-content and the box hugs its content, like a label. If the content gets longer than the parent, it stops at the parent's width and the text wraps.

style.csswhole filecss

.tag {
  width: fit-content;
  padding: 4px 10px;
  background: #e0f2fe;
}

03Compare the three keywords

For the text "Learn CSS sizing today" in a wide parent:

Compare the three keywordsdiagram

Rendering diagram…

04Make it responsive with max-width

A reading column: full width on phones, but never wider than 65 characters (ch is the width of the "0" character in the current font, a handy unit for line length).

style.csswhole filecss

.article {
  width: 100%;
  max-width: 65ch;
  margin-inline: auto;
}

05Keep a shape with aspect-ratio

A video placeholder that's always 16:9, whatever its width. Set the width (or let it fill), leave the height auto, and add the ratio.

style.csswhole filecss

.player {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: black;
}

06Avoid the percentage-height trap

height: 100% on a child of an auto-height parent does nothing. Give the parent a definite height, or use viewport units (min-height: 100dvh), or Flexbox/Grid stretching (Phases 7 and 8).

Try it yourself

1
Add a third chip
In the first example, add a third chip to every box. Predict the four numbers first (100, 300, 300, 150), then run.
2
Change the ratio
In the second example, change aspect-ratio to 4 / 3. Predict the height for a 320px width (240), then run.
3
Make the percentage work
Give .auto-parent a height: 100px. Predict the third line (50), then run. A definite parent height lets the percentage resolve.

Code & diagrams

min-content, max-content and fit-content, measured New tab

Each box holds two 100px chips. min-content wraps them (100), max-content keeps them on one line (200), fit-content takes 200 when there's room and the available 150 when there isn't.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

min-content: 100
max-content: 200
fit-content in 300px: 200
fit-content in 150px: 150

max-width, min-width, aspect-ratio and percentage heights New tab

The video is capped at 320px and its height follows the ratio. The 50% height can't resolve, so the box is just as tall as its content.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

video: 320 x 180
min-width beats max-width: 400
50% of an auto-height parent: 30

Sizing recipescss

/* Images never overflow, keep their ratio */
img, video { max-width: 100%; height: auto; }

/* A readable centred column */
.article { max-width: 65ch; margin-inline: auto; }

/* A label that hugs its text */
.tag { width: fit-content; }

/* A square avatar from any width */
.avatar { width: 64px; aspect-ratio: 1; }

/* A full-screen section that respects mobile browser toolbars */
.hero { min-height: 100dvh; }

/* Clamp in one line: at least 300px, ideally 50%, at most 800px */
.panel { width: clamp(300px, 50%, 800px); }

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

height: 100% that does nothing

Give a sidebar height: 100% inside a wrapper whose height is auto.

terminal

$ the page shows

── what you'll see ──

The sidebar is only as tall as its own content, not the full page

Break #2

A fixed width on mobile

Give a card width: 600px and open the page on a 390px-wide phone.

terminal

$ the page shows

── what you'll see ──

The card runs off the right side and the whole page scrolls sideways

Myth vs fact

Myth

max-width always wins.

Fact

When min-width is larger than max-width, min-width wins. The order is: compute width, clamp it by max-width, then by min-width.

Myth

aspect-ratio forces an exact shape.

Fact

If the content needs more height, the box grows past the ratio, because its automatic minimum height is its content. Add overflow: auto or min-height: 0 to keep the exact ratio.

Myth

100vh is the visible screen height on phones.

Fact

On mobile browsers vh uses the largest viewport (toolbars hidden), so 100vh can be taller than what you see. dvh (dynamic), svh (small) and lvh (large) units give precise control.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

▸
Intrinsic sizes are the input to Flexbox and Grid: a flex item's automatic minimum width is its min-content size (the root of the "min-width: 0" gotcha in Topic 7.3), and Grid's auto and minmax(min-content, 1fr) tracks use these sizes directly.
▸
aspect-ratio works with box-sizing: by default it applies to the content box; with border-box, to the border box. Values like aspect-ratio: auto 16 / 9 use the element's natural ratio when it has one (an image) and 16/9 until then.
▸
Setting width and height attributes on <img> lets modern browsers compute a default aspect-ratio before the image downloads, reserving space and reducing Cumulative Layout Shift (CLS), a Core Web Vital.
▸
fit-content is also a function in Grid: grid-template-columns: fit-content(300px) sizes a track to its content but caps it at 300px. stretch (still being standardised, -webkit-fill-available in older engines) is the opposite keyword: fill the available space.

Remember this

1
Extrinsic sizing means the size comes from the context: a block with width: auto fills its parent; width: 50% takes half of the containing block; width: 300px is fixed no matter the content. Intrinsic sizing means the size comes from the content itself: an inline-block, a float, or a box with width: max-content is as wide as what's inside it.
2
The intrinsic keywords say exactly how to measure the content. min-content is the smallest width the content can have without overflowing: every possible line break is taken, so for text it's the longest single word. max-content is the width the content wants with no line breaks at all: the whole sentence on one line. fit-content is "as wide as the content wants, but no wider than the space available, and no narrower than min-content": in maths, min(max-content, max(min-content, available)). It's how a button or a floated box sizes itself by default.
3
min-width and max-width (and min-height, max-height) clamp a size. max-width: 600px lets a box shrink on small screens but stops it growing past 600px on large ones, which is the most common responsive pattern: width: 100%; max-width: 600px. If the rules conflict, **min-width wins** over max-width, and both win over width.
4
Percentage heights are a classic trap. height: 50% only works if the parent's height is definite (set explicitly, or itself resolved from a definite height). If the parent's height is auto (decided by its content), the percentage can't be resolved and behaves like auto. Widths don't have this problem because a block's width always comes from its parent. Viewport units (100vh, or 100dvh for mobile browsers whose toolbars shrink and grow) give a height that doesn't depend on parents.
5
aspect-ratio: 16 / 9 tells the box to keep a shape: if the width is known and the height is auto, the height is calculated from it (a 320px-wide box becomes 180px tall). It replaced the old padding-percentage trick from Topic 5.1. If the content is taller than the ratio allows, the box grows to fit it (because the automatic minimum height is the content size), unless you set min-height: 0 or overflow other than visible. Images and videos have a natural aspect ratio; giving them width and height attributes in HTML lets the browser reserve the space before they load, which prevents layout jumps.
6
Images and other replaced elements (content from outside CSS, like <img> and <video>) have their own intrinsic size. The single most useful line for them is img { max-width: 100%; height: auto; }: the image never overflows its container, and its height follows its width to keep the ratio. For how the picture fills a fixed box, see object-fit in the HTML course's media topics.

Explain it without notes

What is the difference between intrinsic and extrinsic sizing?

Define min-content, max-content and fit-content.

Why doesn't height: 50% work inside a parent with height: auto?

How does aspect-ratio decide the height, and when does it not hold?

What happens when min-width and max-width conflict?

Practice

Make a .tag that hugs its text with 4px 10px padding, and log whether it is narrower than its 400px parent.

Make a square .thumb that is 25% of a 480px parent, using aspect-ratio. Log its width and height.

Make a card that is 100% wide but at most 360px, inside a 500px and a 300px parent. Log both widths.

Trade-offs

↔
Fixed sizes are simple and predictable but break on small screens; intrinsic and clamped sizes adapt to content and screens but are harder to predict, so check them at several widths.
↔
aspect-ratio is clean and readable; the old padding-percentage trick still works in very old browsers but needs an extra wrapper and absolute positioning.

Done when you can

I can explain intrinsic vs extrinsic sizing with examples.
I can predict min-content, max-content and fit-content widths.
I can build a responsive box with width: 100% and max-width.
I know why percentage heights fail and three ways to fix it.
I can keep a shape with aspect-ratio and know when it stretches.
I can make images responsive with max-width: 100%; height: auto.

Command Palette

Words you'll meet

Step by step

01Default: a block fills its parent

02Shrink-wrap with fit-content

03Compare the three keywords

04Make it responsive with max-width

05Keep a shape with aspect-ratio

06Avoid the percentage-height trap

Try it yourself

Add a third chip

Change the ratio

Make the percentage work

Code & diagrams

Break it on purpose

height: 100% that does nothing

A fixed width on mobile

Myth vs fact

Pro corner

Remember this

Explain it without notes

Practice

Trade-offs

Done when you can