max-width (CSS property)

Share this article

Description

This property sets the maximum content width of a block or a replaced element. This maximum width does not include padding, borders, or margins.

An element to which a max-width is applied will never be wider than the value specified even if the width property is set to be wider. There is an exception to this rule, however: if min-width is specified with a value greater than that of max-width, the container’s width will be the largest value, which in this case means that the min-width value will be the one that’s applied.

max-width is often used in conjunction with min-width to produce a width range for the element concerned.

Combining max-width and width

Note that max-width and width shouldn’t be applied to the same element using the same unit, as one will override the other. If, for example, the width is set to 150px and the max-width is set to 60px, the actual width of the element will be 60px, and the width declaration will become redundant.

The following style rule shows how conflicts are resolved where an element has been given both a width and a max-width using the same unit (pixels in this case):

.example {
  max-width: 60px;
  width: 150px;
}

In the above example, the width of the element will be fixed at 60px.

However, it’s acceptable to set max-width and width when the values are different units (although it may not be entirely useful, there are a few cases where it can be used to good effect).

This style rule assigns a max-width of 160px to images with the class “example”, and also assigns a width of 50%:

img.example {
  width: 50%;
  max-width: 160px;
  height: auto;
}

The final width of the image in the above example will be the smallest value.

If you want an image to scale when the page width is small, so that the image doesn’t break out of its column, you could use the above example to ensure that the image’s size decreases once the available space is less than 160 pixels.

If the available space is greater than 160 pixels, the image will expand until it’s 160 pixels wide—but no further. This ensures that the image stays at a sensible size—or its correct aspect ratio—when space allows.

The min-width property can be used for the reverse of this scenario.

If the contents of a block require more horizontal space than is allowed by the limits that have been set, the behavior is defined by the overflow property.

Example

This style rule assigns a maximum width of 400 pixels and a minimum width of 100 pixels to paragraphs within the element with ID "example":

#example p {
  max-width: 400px;
  min-width: 100px;
}

Value

The property takes a CSS length (px, pt, em, and so on), a percentage, or the keyword none. Negative length values are illegal.

Percentage values refer to the width of the containing block. If the containing block’s width is negative, the used value is none.

Frequently Asked Questions (FAQs) about CSS Max-Width Property

What is the difference between width and max-width in CSS?

The width property in CSS sets a specific width for an element, while the max-width property sets the maximum width that an element can stretch to. If the content inside an element is larger than the set max-width, it will automatically adjust to the max-width value. However, if the content is smaller, the element will shrink to fit the content, unlike the width property which maintains the set width regardless of the content size.

How does max-width work with responsive design?

Max-width is a crucial property in responsive design. It allows a webpage to adjust its layout based on the size of the device screen. By setting a max-width, you ensure that on larger screens, the content will not stretch beyond a certain point, maintaining readability and design integrity. On smaller screens, the content will adjust to fit the screen size.

Can I use percentage values with max-width?

Yes, you can use percentage values with the max-width property. The percentage is relative to the width of the parent element. For example, if you set an element’s max-width to 50%, it will take up to half of the parent element’s width.

What happens when max-width and width are set on the same element?

When both width and max-width are set on the same element, the smaller of the two values will be used. For instance, if the width is set to 500px and the max-width is set to 400px, the browser will use the 400px value.

How does max-width interact with min-width?

If an element has both max-width and min-width set, the browser will try to respect both. However, if the max-width is smaller than the min-width, the min-width value will be used. This ensures that the element does not become smaller than the minimum width specified.

Can max-width be used with all HTML elements?

The max-width property can be used with all block-level and inline-block elements. It does not apply to inline elements or to table rows and row groups.

How does max-width work with images?

When used with images, max-width can help maintain the aspect ratio of the image while preventing it from stretching beyond a certain point. This is particularly useful in responsive design where the image size needs to adjust based on the screen size.

Can max-width override the width set in HTML?

Yes, max-width in CSS will override the width set in HTML. This is because CSS has a higher specificity than HTML.

Is max-width supported in all browsers?

Yes, max-width is supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Internet Explorer 9 and above.

What units can be used with max-width?

Max-width can accept several units, including pixels (px), ems (em), rems (rem), percentages (%), and viewport units (vw, vh). Each unit has its own use case and can be used based on the specific requirements of your design.

Adam RobertsAdam Roberts
View Author

Adam is SitePoint's head of newsletters, who mainly writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week