min-height

Summary

Sets the minimum height for an element. It prevents the height of the element to exceed the specified value. It overrides both the height & the max-height property if any them is specified below the min-height value.

Overview table

Initial value: auto (0 for non-flex elements)
Applies to: All elements but non-replaced inline elements, table columns, and column groups
Inherited: No
Media: visual
Computed value: The percentage as specified or the absolute length
Animatable: Yes
CSS Object Model Property: min-height
Percentages: Of the height of containing block. If the height of the containing block depends on the content & the element does not have position as absolute, then this value becomes 0.

Syntax

min-height: auto
min-height: calc
min-height: fill-available
min-height: fit-content
min-height: inherit
min-height: length
min-height: max-content
min-height: min-content
min-height: percentage

Values

auto: Default. Behaves as 0 for non-flexbox elements. On flexbox acts as min-content.
length: Specifies a fixed height. Negative values are not allowed. See length for possible units.
percentage: A <percentage> relative to the height of the containing block. If the containing block has no height explicitly set then is is treated as 0. Negative values are not allowed
calc: See css calc function for mode details.
inherit: Takes the same specified value as the property for the element’s parent.
max-content: The narrowest space a box could take while fitting around its contents if none of the soft wrap opportunities within the box were taken.(Space/Punctuation in text are examples of a soft-wrap opportunity). Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers.
min-content: The narrowest measure a box could take that doesn’t lead to inline-dimension overflow that could be avoided by choosing a larger measure. Roughly, the measure that would fit around its contents if all soft wrap opportunities within the box were taken. Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers.
fill-available: Fill the entire available space of from the containing block (Height minus horizontal margin, border and padding of the containing block). Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers.
fit-content: If the total available space is finite, equals to min(max-content, max(min-content, fill-available)). Otherwise, equal to the max-content measure. Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers.

Examples

Use min-height with any CSS selector to apply it.

/* Ensure all div elements are a min-height of 100px */
div { min-height: 100px }

min-height property overrides the height of an element.

<style>
/* min-height example */

/*Default width. Height is based on the content*/
.without-min-height, .with-min-height {
    width: 100px;
}

/*Max height overrides height*/
.with-min-height {
    background: cyan;
    min-height: 300px;
}

.without-min-height {
    background: red;
}

.content {
    border: 1px solid black;
    padding: 10px;
}
</style>

<div class="without-min-height"><p class="content">Without Min Height. Height taken from content (with black border).</p></div>
<br />
<div class="with-min-height"><p class="content">With Min Height. Content (with black border) may not fill entirety of element.</p></div>

View live example

Usage

 CSS min height is well supported across most browsers. A few things to consider while usage:

min-height overrides max-height. If min-height supplied is greater than max-height, max-height does not have an impact.
max-content, min-content, fit-content, and fill-available are in W3C draft stage and not supported across all browsers.
Support for calc is better across browsers. Vendor prefixes may be needed.

Related specifications

CSS 2.1 (Section 10.7): W3C Recommendation
CSS Intrinsic & Extrinsic Sizing Module Level 3: Working Draft

Attributions

Microsoft Developer Network: [Windows Internet Explorer API reference Article]