# CSS: “min-width”: The types are incompatible.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-min-width-the-types-are-incompatible
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

```html
<style>
  .content {
    min-width: calc(100vw - 300);
  }

  .card {
    min-width: max(320px, 50);
  }
</style>
```

## Valid example

```html
<style>
  .content {
    min-width: calc(100vw - 300px);
  }

  .card {
    min-width: max(320px, 50%);
  }
</style>
```