The min-height property sets the minimum vertical height of an element. It stops the used height from going smaller than the value you set.
It is not inherited. The initial value is auto. Content can still make the box grow taller. For a writing-mode-aware floor, use min-block-size. Pair with max-height when you also need a cap.
Not deprecated. Length and percentage values are Baseline Widely available. stretch has limited support. The fit-content() function is experimental and not usable in browsers yet.
min-height: auto | <length> | <percentage> | min-content | max-content | fit-content | initial | inherit;Same value set as other size properties. Prefer lengths and percentages for everyday layouts.
| Value | Description | Try it |
|---|---|---|
auto | Default. Browser chooses the minimum; often no extra floor | Try it |
<length> | Fixed floor such as 150px, 12rem, or 40vh | Try it |
<percentage> | Percent of the containing block’s height | Try it |
vs height | When the floor is larger than height, the floor wins | Try it |
initial | Resets to auto | Try it |
inherit | Takes the parent’s min-height | Try it |
min-heightSet a floor when short content should not collapse the box.
auto.max-height when you also need an upper limit.| Piece | Required? | Role |
|---|---|---|
| Block-level or replaced box | Yes | Does not apply to non-replaced inline elements |
min-height value | Yes | auto, length, percentage, or keyword |
| Parent height | For % | Percentage uses the containing block height |
height / max-height | Optional | Preferred size and upper cap; the floor can override a smaller height |
Change min-height on a short box. The sample text is short on purpose so you can see the floor.
Each snippet focuses on min-height. Use Try It Yourself for a live editor.
Give a short box a 150px minimum so it does not collapse.
<style>
div {
min-height: 150px;
}
</style>
<div>Short text</div>150px is the smallest height allowed.rem, em, or vh the same way.Keep a child at least half of the parent’s height.
<style>
.parent {
height: 220px;
}
.child {
min-height: 50%;
}
</style>
<div class="parent">
<div class="child">At least half</div>
</div>220px defines the containing block.50% resolves to a 110px floor here.0.When min-height is larger than height, the used height becomes the floor.
<style>
div {
height: 80px;
min-height: 150px;
}
</style>
<div>Floor wins</div>height: 80px is the preferred size.min-height: 150px is larger than that preferred size.max-height, the floor still wins.Most confusion is about percentages, growth, and mixing with height.
If the parent height depends on content, a percentage min-height is treated as 0 for normal flow. Give the parent an explicit height.
Content larger than the minimum still expands the box. Use height for a preferred size and max-height for a cap.
min-height can beat heightWhen the floor is larger than height or max-height, the used height becomes the min-height value.
min-height: autoThat auto minimum can stop a flex item from shrinking below its content. Set min-height: 0 when you need overflow or shrink behavior.
box-sizing still appliesWith border-box, padding and border count inside the size. With content-box, they add outside it.
min-height is a browser layout property. Node.js, Deno, and Bun do not apply it.
Length and percentage values work in all modern browsers and older ones. Intrinsic keywords are widely supported in current engines. stretch is limited; fit-content() is not usable yet.
Bottom line: Safe for every modern site. Prefer lengths and percentages for everyday work. Treat stretch as limited and fit-content() as experimental.
auto, lengths, and percentages of the parent height.auto. Not inherited. A larger floor overrides a smaller height.min-block-size when the floor should follow writing mode.One line: min-height is a vertical floor — not a fixed height, and not a maximum.
Learn the logical minimum size on the inline axis.
5 people found this page helpful