HTML Guides for min-height

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

<div style="min-height: calc(100vh - 80);">Hero</div>

<div style="min-height: max(300px, 50);">Card</div>

Valid example

<div style="min-height: calc(100vh - 80px);">Hero</div>

<div style="min-height: max(300px, 50vh);">Card</div>

The min-height property sets the minimum height of an element. Unlike shorthand properties such as margin or padding, min-height accepts only a single value. Providing multiple space-separated values (e.g., min-height: 100px 200px) is invalid and will trigger this error.

This error commonly occurs for several reasons:

• Multiple values provided: min-height is not a shorthand and does not accept more than one value.
• Invalid units or typos: Using an unrecognized unit (e.g., 100pixels instead of 100px) or a misspelled keyword.
• Using unsupported CSS functions or syntax: Some newer CSS features like min-height: fit-content(200px) may not be recognized by the validator or may lack browser support.
• Confusing min-height with other properties: Accidentally using syntax meant for properties like grid-template-rows or minmax() expressions.
• Missing units on non-zero values: Writing min-height: 100 instead of min-height: 100px. Zero is the only numeric value that doesn't require a unit.

According to the CSS specification, valid values for min-height include:

Fixing this issue ensures your CSS is standards-compliant and behaves predictably across browsers. Invalid min-height values will be ignored by browsers, which means your layout may not render as intended.

Examples

Incorrect: multiple values

<div style="min-height: 100px 200px;">Content</div>

min-height only accepts a single value. This is not a shorthand property.

Incorrect: missing unit

<div style="min-height: 100;">Content</div>

Non-zero numeric values must include a unit.

Incorrect: invalid keyword or typo

<div style="min-height: inheret;">Content</div>

The keyword inherit is misspelled.

Correct: single length value

<div style="min-height: 100px;">Content</div>

Correct: percentage value

<div style="min-height: 50%;">Content</div>

Correct: using calc() for computed values

<div style="min-height: calc(100vh - 80px);">Content</div>

Correct: using a keyword

<div style="min-height: min-content;">Content</div>

Correct: using auto

<div style="min-height: auto;">Content</div>

If you need to set both a minimum and maximum height on an element, use min-height and max-height as separate properties:

<div style="min-height: 100px; max-height: 400px;">Content</div>