PLAY CSS
jaen

Box

min-height

min-height sets a lower limit on the height of an element. It keeps that height even with little content and grows taller when there is more, so it holds up better than a fixed height.

Syntax

auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>)

Preview

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
Presets
Drag the bottom-right corner to resize

Code

.box {
  height: auto;
  min-height: 12em;
}

Controls

min-height12em
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

About

Writing the value

  • A length such as 200px: never shorter than that.
  • auto: usually no lower limit. This is the initial value. For grid items and items of a column flex container (flex-direction: column), the height that keeps the content from overflowing becomes the limit.
  • min-content, max-content and fit-content: in horizontal text, all of these use the content's height as the limit.

How it differs from height

The preview on this page adds min-height to a box whose height is left to its content with height: auto. A limit taller than the content stretches the box to that height; a shorter one leaves it at the content's height. Unlike height, content taller than the limit never overflows the box.

For a full-screen section, min-height: 100dvh works better than height: 100dvh because the section can still grow when the content is long.

A percentage such as 50% only works when the parent has a definite height, so this page does not offer it. Dragging the handle at the bottom right of the preview box to shrink it stops at min-height.

References

MDN Web Docsmin-heightSpecificationCSS Box Sizing Module Level 3Can I usemin-height

Comments

PLAY CSS