max-width

Sets a maximum width the element won’t grow beyond.

Initial value: none
Inherited: No
Animatable: yes, as a length or percentage
Applies to: all elements except non-replaced inline elements (e.g. `<span>`), table rows, and row groups
JavaScript: element.style.maxWidth = "65ch"

On this page

Example
Definition and usage
Syntax
Values
Values in practice
Browser support
Good practices
Related entries

Example

CSS

.container {
  max-width: 480px;
  margin-inline: auto;
}

img {
  max-width: 100%;
  height: auto;
}

Preview

Definition and usage

The max-width property caps the width from above. The element can be narrower if there isn’t enough room, but it will never exceed the given value. It’s one of the most important properties in responsive design.

Classic uses are a page container (max-width: 1200px; margin: 0 auto;), a comfortable line length for text (max-width: 65ch), and images that must not overflow their parent (max-width: 100%).

If max-width is smaller than width, max-width wins. And when it conflicts with min-width, min-width wins.

Syntax

max-width: none | <length> | <percentage> | min-content | max-content | fit-content;

Values

none
No limit. The text takes up the full width.
260px
<length>
The paragraph will be no wider than 260px.
30ch
<length>
About 30 characters per line. The ch unit is the width of the digit 0.
60%
<percentage>
At most 60% of the parent’s width.

Value	Type	Description
none		No limit. The text takes up the full width.
260px	<length>	The paragraph will be no wider than 260px.
30ch	<length>	About 30 characters per line. The `ch` unit is the width of the digit 0.
60%	<percentage>	At most 60% of the parent’s width.

Values in practice

none

No limit. The text takes up the full width.

.demo { max-width: none; }

260px

The paragraph will be no wider than 260px.

.demo { max-width: 260px; }

30ch

About 30 characters per line. The ch unit is the width of the digit 0.

.demo { max-width: 30ch; }

60%

At most 60% of the parent’s width.

.demo { max-width: 60%; }

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

Add img { max-width: 100%; height: auto; } to every project. Images will then never overflow a phone screen.
For text, aim for 60-75 characters per line, for example max-width: 65ch.

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice CSS in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course