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

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

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

Valid example

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

Learn more:

MDN Reference

MDN Web Docs: max-width

→

MDN Reference

MDN Web Docs: undefined

→

MDN Reference

MDN Web Docs: Nullish coalescing operator (??)

→