A layout can be fluid without letting content become uncomfortably wide. The CSS max-width property sets a hard upper limit on an element’s width: the element may be narrower, but it cannot render wider than its declared maximum. This makes it useful for page containers, readable text columns, and responsive components. section 6.3.4 section 8.1.5
For a liquid page layout, apply max-width to the outer container, then express interior columns and spacing as percentages. A body capped at 960px can shrink on smaller screens, while an article at 66.67% and an aside at 33.33% scale with their parent instead of retaining fixed pixel widths. section 6.3.4
Cap a responsive page container
body { max-width: 960px; } article { width: 66.67%; } aside { width: 33.33%; } The maximum keeps the overall layout from expanding past 960px, while percentage-based children respond when the available parent width changes. section 6.3.4
In a horizontal flex container, max-width participates after flex growth proposes item widths. If a proposed width exceeds the cap, that item stops growing; remaining free space is redistributed among non-constrained items according to their flex-grow values. section 5.3 section 5.3.2
Limit a growing flex item
A 600px container has three 100px-basis items with flex-grow values 1, 2, and 3. Growth first proposes widths of 150px, 200px, and 250px. With max-width: 220px on every item, the third item is capped at 220px. The resulting 30px underflow is redistributed: the first two items render at 160px and 220px, and the third remains 220px. section 5.3.2
Listing 5.9 Using max-width to limit growing
.container {
display: flex;
width: 600px;
}
.item {
max-width: 220px; #1
}
.item-1 {
flex-grow: 1;
flex-basis: 100px;
}
.item-2 {
flex-grow: 2;
flex-basis: 100px;
}
.item-3 {
flex-grow: 3;
flex-basis: 100px;
}
Inspect a flex container where a shared 220px maximum prevents the highest-growth item from exceeding its limit. section 5.3.2
max-width can also support typography. When a font size changes, a calculated maximum width can scale line length alongside line-height; one example maps 24px text to a 720px maximum width. Choosing a font size of 20px similarly yields a 600px maximum width and a 1.41 line height for a more readable article. section 8.1.2 section 8.1.5
In CSS Grid, an auto track respects width constraints. A sidebar placed in an auto column can combine min-width and max-width so it remains responsive without shrinking to its intrinsic minimum or expanding to its intrinsic maximum; the demonstrated bounds keep it between 150px and 300px. section 4.4.2
