min-height

min-height sets a lower bound on physical height. Unlike a fixed height, it can leave room for content to grow. It can override a conflicting maximum.

A minimum without clipping

The panel is at least 100px tall. Extra content can make it taller, which is useful when text length or user settings vary.

<div class="panel">Add more text in the editor. This panel can grow.</div>

.panel {
  min-height: 100px;
  box-sizing: border-box;
  padding: 1rem;
  background: #dbeafe;
}

A scrollable flex column

The outer panel has a definite height. The content area can shrink because its minimum is zero, and scrolling keeps all lines reachable.

<section class="panel">
  <h2 id="notes-title">Practice notes</h2>
  <div class="content" tabindex="0" role="region" aria-labelledby="notes-title">
    <p>First: read the code.</p>
    <p>Second: change one value.</p>
    <p>Third: compare the result.</p>
    <p>Fourth: check a narrow screen.</p>
    <p>Fifth: explain what changed.</p>
  </div>
</section>

.panel {
  display: flex;
  flex-direction: column;
  height: 150px;
  border: 1px solid #94a3b8;
}
.panel h2 {
  margin: 0;
  font-size: 1rem;
  padding: 0.5rem;
}
.content {
  min-height: 0;
  overflow: auto;
  padding: 0.5rem;
}
.content p {
  margin-block: 0.5rem;
}

Values and percentage prerequisites

The initial value is auto and min-height is not inherited. Auto depends on layout context; flex and grid automatic minimums may preserve content size. Lengths, percentages, and intrinsic sizing values provide explicit constraints.

A percentage minimum in ordinary block layout generally needs a definite containing-block height. A content-sized parent is not automatically a useful percentage reference; flex/grid sizing can introduce additional rules. Newer stretch and sizing functions have separate support requirements.

Troubleshooting

Min-height does not align children vertically. Use align-items or another layout rule when that is the goal. Min-height:0 allows shrinking but does not supply scrolling; overflow does. Test keyboard scrolling and text zoom instead of clipping a fixed-height panel.

Sources and browser support

MDN: min-height describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.