max-width

max-width sets an upper bound on physical width. It limits the box, not the amount of content. Wrapping and overflow are separate decisions.

Cap a full-width box

The box requests 100% width but stops at 16rem. It can still shrink below that value when the containing block is narrower.

<div class="box">A maximum is a cap, not a fixed width.</div>

.box {
  width: 100%;
  max-width: 16rem;
  box-sizing: border-box;
  padding: 1rem;
  background: #dbeafe;
}

Limit reading width

A character-based maximum keeps this paragraph’s line length bounded. The text still occupies as many lines as it needs.

<p class="reading">
  Choose a comfortable reading width, then test the actual font and the content.
  A long identifier such as workshopregistrationnumber can wrap without clipping
  the paragraph.
</p>

.reading {
  max-width: 38ch;
  margin-inline: auto;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

Values and conflicts

The initial value is none and max-width is not inherited. None removes the upper bound; auto is not a general max-width value. Lengths, percentages of the containing block’s width, and intrinsic sizing keywords are available. Check newer stretch and sizing-function support separately.

Min-width wins if it exceeds the maximum, including an automatic content-based minimum in flex or grid contexts. Use min-width:0 where appropriate rather than assuming max-width always overrides every other sizing rule.

Common mistake

Max-width does not truncate text automatically. Content may wrap at allowed boundaries or overflow, depending on white-space, overflow-wrap, and overflow. It does not size ordinary non-replaced inline elements. For images, max-width:100% with height:auto is often a useful responsive pattern.

Sources and browser support

MDN: max-width describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.