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

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

A math function in the `min-height` value, such as `calc()`, `min()`, `max()` or `clamp()`, combines values whose types can't be mixed, like a length and a unitless number.

`min-height` sets the smallest height an element can have, even when its content would make it shorter. The property takes a length such as `300px` or `50vh`, a percentage, or a keyword like `auto`, so any math function inside it has to produce a length or a percentage too.

When `calc()` adds or subtracts, both sides must have the same type. `calc(100vh - 80px)` subtracts one length from another, but `calc(100vh - 80)` subtracts a plain number from a length, and the result has no type the browser can use. The arguments of `min()`, `max()` and `clamp()` follow the same rule, so `max(300px, 50)` can't compare a length with a number.

This mistake often turns up in a full-screen section that subtracts a fixed header from the viewport height, with the unit left off the header's height. Multiplication is different: one side can be a plain number that scales the other, so `calc(100vh - 2 * 40px)` is valid.

Browsers ignore a declaration with a mistyped expression. The element keeps the `min-height` it got from earlier rules, usually `auto`, and the section can end up shorter than you intended.

The validator doesn't look inside `var()`, so a custom property that holds a bare number passes validation. The browser still rejects the result once it substitutes the value.

## Invalid example

```html
<div style="min-height: calc(100vh - 80);">Hero</div>
<div style="min-height: max(300px, 50);">Card</div>
```

## Valid example

```html
<div style="min-height: calc(100vh - 80px);">Hero</div>
<div style="min-height: max(300px, 50vh);">Card</div>
```