max-width (CSS property)

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.