HTML Guides for min-height

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>