# CSS: “max-width”: “auto” is not a “max-width” value.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-max-width-auto-is-not-a-max-width-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `max-width` property sets the maximum width an element can grow to, preventing the computed value of `width` from exceeding the specified limit. While many CSS sizing properties accept `auto` as a value (for example, `width: auto` and `margin: auto` are perfectly valid), the `max-width` property does not. This is a common mistake because developers often assume `auto` is universally accepted across similar properties.

When a browser encounters `max-width: auto`, it will typically ignore the invalid declaration and fall back to the default value of `none`. While the page may still render as expected in some browsers, relying on this behavior is unreliable and non-standard. Writing valid CSS ensures consistent rendering across all browsers and makes your stylesheets easier to maintain and debug.

If your intent is to remove a maximum width constraint (effectively making `max-width` have no effect), use `none` — this is the default value. If you want the element to size itself based on its content, use `max-content`, `min-content`, or `fit-content`. If you need to reset the property to its initial value, use `initial` (which resolves to `none`).

## Valid values for `max-width`

The `max-width` property accepts the following types of values:

- **`none`** — No limit on the element's width (the default).
- **Length values** — Such as `500px`, `3.5em`, `20rem`, `80ch`.
- **Percentage values** — Such as `75%`, relative to the containing block's width.
- **Keyword values** — `max-content`, `min-content`, `fit-content`, or `fit-content(<length>)`.
- **Global values** — `inherit`, `initial`, `revert`, `unset`.

## Examples

### ❌ Incorrect: using `auto` with `max-width`

```html
<div style="max-width: auto;">
  This container has an invalid max-width value.
</div>
```

This triggers the validation error because `auto` is not a valid `max-width` value.

### ✅ Fixed: using `none` to remove the constraint

If you want no maximum width limit (the most likely intent when writing `auto`), use `none`:

```html
<div style="max-width: none;">
  This container has no maximum width constraint.
</div>
```

### ✅ Fixed: using a specific length or percentage

If you want to cap the element's width at a specific size:

```html
<div style="max-width: 600px;">
  This container will not grow beyond 600 pixels.
</div>
```

```html
<div style="max-width: 80%;">
  This container will not exceed 80% of its parent's width.
</div>
```

### ✅ Fixed: using intrinsic sizing keywords

If you want the element's maximum width to be based on its content:

```html
<div style="max-width: max-content;">
  This container's max width is determined by its content.
</div>
```