Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
max-height

max-height

Specifies the maximum height of an element.

Sample Code

style.css

/* px: cap height at 500px */
div.test { max-height: 500px;}

/* none: no maximum height (initial value) */
div.test2 { max-height: none;}

/* Open/close a collapsible panel with max-height */
.panel { max-height: 0; overflow: hidden; transition: max-height 0.3s ease;}
.panel.open { max-height: 500px;}

/* Constrain a scrollable area */
.scroll-box { max-height: 300px; overflow-y: auto;}

/* Specify with vh (viewport height) */
.modal { max-height: 80vh; overflow-y: auto;}

/* Prevent images from overflowing their container */
img { max-height: 100%; width: auto;}

Available Values

Value	Description
none	No maximum value is specified. The initial value is 'none'.
number	A numeric value. Commonly used units are 'px' and '%'. Negative values are not allowed. When specified as '%', the reference size is the height of the containing block.

Browser Display Result

<div style="max-height: 100px; background-color: #ff0;">This is a div element. 'max-height: 100px' is specified.</div>

<div style="height: 300px; border: solid 1px #f00;">
	<div style="max-height: 80%; height: 300px; background-color: #ff0;">This is a div inside a div. The parent div (red border) has 'height: 300px'. This element (yellow background) has 'max-height: 80%' and 'height: 300px'. Its maximum height is relative to the parent's height, giving a maximum of '240px'. Since '240px' is less than 'height: 300px', this element's height becomes '240px'.</div>
</div>