The min-height property establishes a minimum height for an element’s used height, guaranteeing that the element will not be rendered shorter than that floor even when its content or layout conditions would otherwise make it smaller. It does not force an element to remain exactly that height; when the element’s content or other sizing rules require more space, the box will expand beyond the minimum. Which part of the box is constrained depends on the element’s sizing model, particularly box-sizing, because that determines whether padding and borders are included in the box’s sizing calculations.

In layout calculations, min-height interacts with explicit sizing and upper bounds: it acts as a lower bound that the final used height cannot fall below, while properties such as height and max-height participate in determining the resulting size. If an explicit height were to resolve smaller than the element’s minimum, the minimum value will take precedence; likewise, a maximum height can cap expansion beyond a ceiling. This relationship lets you express intentions like “don’t go below this minimum, but allow growth up to a larger constraint” without hard-coding a single fixed size.

When content exceeds the available space, the actual display of that overflow is controlled by overflow; min-height itself does not introduce scrolling or clipping, it only establishes the minimum area. For elements that participate in intrinsic sizing or in more complex layout contexts (for example, replaced elements or table cells), the minimum contributes to intrinsic minimum size calculations and can prevent collapsing behaviors that would otherwise reduce an element’s visible presence.

In modern layout patterns, min-height is particularly useful for maintaining usable and consistent interfaces. On flex items it constrains how small an item is allowed to become during flexing and therefore affects how free space is distributed by the layout algorithm — especially when combined with the flex property — helping prevent content from being squeezed to unreadable sizes. Designers use min-height to keep panels, cards, headers, or footers visually stable when content is sparse, to protect against accidental collapse of containers, and to ensure a minimum touch target or visual rhythm across different viewport sizes.