CSS max-height Property

The max-height property sets the maximum height of an element.

It prevents an element from becoming any larger than the specified value.

Example

#

Below is an element with a 130-pixel max-height value. The element will not get any larger than the max-height, even when adding more content. To prevent spilling the content, the overflow-y attribute adds a scrollbar.

Henri Matisse was a French artist, known for both his use of color and his fluid and original draughtsmanship. He was a draughtsman, printmaker, and sculptor, but is known primarily as a painter. Matisse is commonly regarded, along with Pablo Picasso, as one of the artists who best helped to define the revolutionary developments in the visual arts throughout the opening decades of the twentieth century, responsible for significant developments in painting and sculpture.
<style>
  .max {
    border: 1px solid tomato;
    padding: 15px;
    width: 400px;
    max-height: 130px;
    overflow-y: scroll;
  }
</style>

<div class="max">
  Henri Matisse was a French artist,
  known for both his use of color and
  his fluid and original draughtsmanship.
  He was a draughtsman, printmaker, and
  sculptor, but is known primarily as a
  painter. Matisse is commonly regarded,
  along with Pablo Picasso, as one of the
  artists who best helped to define the
  revolutionary developments in the
  visual arts throughout the opening decades
  of the twentieth century, responsible for
  significant developments in painting and
  sculpture.
</div> 
Note: If the content is smaller than the maximum height, this property has no effect. It will only prevent height from being larger than the max-height.

Using max-height

If the content is larger than the set maximum height, it will overflow.

In that case, the overflow can be managed with the overflow property.

Syntax

max-height: none | length | initial | inherit;

Values

#

Value Description
none Default. No maximum height.
length Maximum height using any CSS length value.
% Sets maximum height as a percentage.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

Browser support

This table shows when max-height support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
7.0 Oct 2006
Opera
7.0 Jan 2003
Safari
2.0.2 Oct 2005

You may also like

Guides