The max-width property sets the maximum horizontal width of an element. It stops the used width from growing past the value you set.
The box can stay narrower than the limit. It cannot grow wider once it hits the ceiling. Pair it with min-width for a floor. For writing-mode-aware sizing, see max-inline-size.
Not deprecated. Length, percentage, and none are Baseline. Intrinsic keywords (fit-content, max-content) are widely supported; stretch is newer and limited.
The stretch keyword for max-width is not ready for everyday use. Prefer lengths, percentages, or none.
max-width: none | <length> | <percentage> | min-content | max-content | fit-content | initial | inherit;Start with none, lengths, and percentages. auto is not a valid value here.
max-widthChoose a horizontal ceiling, then decide whether the box should also fill smaller containers.
max-width: none when the box should grow freely.width: 100% with a max so the box is fluid on small screens and capped on large ones.max-inline-size when the layout must follow writing mode.| Piece | Required? | Role |
|---|---|---|
| Block or replaced element | Yes | Non-replaced inlines ignore max-width |
max-width value | Yes | none, length, percentage, or keyword |
| Containing block width | For % | Percentage resolves against the parent width |
width: 100% | Optional | Makes the box fill space up to the max |
Same text, different max-width values. Watch the box stop growing wider.
Each snippet focuses on max-width. Use Try It Yourself for a live editor.
Stop a paragraph from stretching too wide on large screens.
<style>
p {
max-width: 20rem;
}
</style>
<p>This paragraph will not grow wider than 20rem.</p>20rem is the maximum width.ch, em, or px the same way.Fill the parent on small screens, but never exceed 12rem.
<style>
.box {
width: 100%;
max-width: 12rem;
}
</style>
<div class="box">Fluid up to 12rem.</div>width: 100% tries to fill the parent.max-width: 12rem wins when 100% would be wider.width and max-width conflict, the max wins.Compare free growth with a hard ceiling on the same text.
<style>
.free {
max-width: none;
}
.capped {
max-width: 12rem;
}
</style>
<p class="free">Grows with the container.</p>
<p class="capped">Stops at 12rem.</p>none means no horizontal ceiling.12rem stops growth at that width.min-width is larger than the max, the min wins.If the cap seems ignored, one of these is usually why.
auto is not validUnlike width, max-width does not accept auto. Use none to remove the ceiling.
max-width beats widthmax-width overrides width when both apply. min-width overrides max-width if the min is larger.
max-width always limits physical width. Prefer max-inline-size when writing mode may change.
A plain span does not take max-width. Use a block, flex item, or replaced element.
When users enlarge text, a tight max may feel cramped. Prefer flexible units like rem or ch for text columns.
max-width is a browser layout property. Node.js, Deno, and Bun do not apply it.
Length, percentage, and none work everywhere. Intrinsic keywords are widely supported; stretch is newer and limited.
Bottom line: Safe for everyday ceilings. Treat stretch as progressive enhancement until support is broad.
none, lengths, and percentages.none. Not inherited. auto is invalid.width: 100% plus a max-width cap.One line: max-width is a horizontal ceiling — the box can be narrower, never wider than the limit.
Learn the logical minimum size on the block axis.
8 people found this page helpful