The max-height property sets the maximum height of an element.
It prevents an element from becoming any larger than the specified value.
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.
<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>
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.
max-height: none | length | initial | inherit;
| 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. |
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 |
