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

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

A `max-width` declaration holds a value the property doesn't accept, often the word `undefined` printed by a script or template in place of a missing value.

JavaScript turns a missing value into the text `undefined` when it builds a string, so `"max-width: " + options.maxWidth` produces `max-width: undefined`. Appending a unit gives `undefinedpx`, arithmetic on a missing number gives `NaNpx`, and a `null` variable prints `null`. The validator quotes whatever ended up in the CSS, and it reports made-up keywords such as `full` with the same message.

A browser that can't parse the value drops the declaration. The element keeps the `max-width` from an earlier rule, or has no limit at all, so an image or text block meant to stay narrow can stretch to the full width of its container.

Fix the code that generates the value. Give the variable a default, for example `options.maxWidth ?? "100%"`, or leave the declaration out when there's no value. The property accepts `none` (its initial value, meaning no limit), lengths such as `600px` or `40rem`, percentages of the containing block's width, the keywords `min-content`, `max-content` and `fit-content`, the `fit-content()` function, `calc()` expressions, and global keywords such as `inherit`. A number with no unit, such as `600`, gets a different validator message asking for a unit.

## Invalid example

```html
<img src="harbor.jpg" alt="Fishing boats moored in the harbor" width="1200" height="800" style="max-width: undefined;">
```

## Valid example

```html
<img src="harbor.jpg" alt="Fishing boats moored in the harbor" width="1200" height="800" style="max-width: 100%;">
```
