HTML Guides for min-width

The min-width value uses a math function such as calc(), min(), max() or clamp() to combine values whose types don't match, most often a length and a number with no unit.

min-width keeps an element from getting narrower than a given size, even when its container shrinks or its width asks for less. It accepts a length like 320px or 20rem, a percentage, or a keyword such as auto or min-content, so any math function in it has to work out to a length or a percentage.

Addition and subtraction inside calc() only work between values of the same type. calc(100vw - 300px) takes one length away from another, while calc(100vw - 300) takes a bare number away from a length, which CSS can't compute. The comparison functions apply the same rule to their arguments: max(320px, 50) asks for the larger of a length and a number, and clamp(200, 50%, 400px) sets a lower bound with no unit.

A common source is a layout that subtracts the width of a sidebar or fixed column from the viewport, with the unit left off that width. Multiplying or dividing by a plain number is fine, because the number only scales the other value: calc(100vw - 2 * 150px) is valid.

Browsers drop a declaration whose expression has the wrong type. The element then uses the min-width from earlier rules, or the initial auto, and the column can shrink below the size you planned when the screen is narrow.

The validator only reports this error when one of the values is a length. It lets calc(100% - 300) and max(50%, 10) through, but browsers reject those as well, so check percentage expressions for a missing unit yourself. It also skips values that come from var().

Invalid example

<style>

.content {

min-width: calc(100vw - 300);

}

.card {

min-width: max(320px, 50);

}

</style>

Valid example

<style>

.content {

min-width: calc(100vw - 300px);

}

.card {

min-width: max(320px, 50%);

}

</style>

The CSS min-width property has a quoted string as its value, such as "" or "200px", and strings are not valid for this property.

min-width accepts a length (200px, 12rem), a percentage (50%), 0, a calc() expression, the keywords auto, min-content, max-content and fit-content, and CSS-wide keywords like inherit. Anything wrapped in quotes is a CSS string, so min-width: "200px" is rejected even though min-width: 200px is fine. The validator repeats the string in the message: “""” means the declaration was min-width: "", an empty string.

An empty string usually comes from a template or page builder that wraps the value in quotes and prints nothing when the setting is blank. Quoted lengths often come from code copied out of JavaScript or JSON, where values are written as strings (minWidth: "200px").

To fix it, remove the quotes. If there is no value to set, remove the whole declaration; the default min-width is auto. Other bad values produce different messages: a number without a unit (min-width: 200) reports that only 0 can be unitless, and an unknown keyword (min-width: none) reports that values are not recognized.

Invalid example

<style>

.sidebar {

min-width: "";

}

.card {

min-width: "200px";

}

</style>

Valid example

<style>

.card {

min-width: 200px;

}

</style>

The empty declaration on .sidebar is gone, and the .card value has no quotes.