CSS max-height Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The max-height property sets the maximum height of an element. The element height value will be calculated depending on the values of the set properties height, max-height and min-height.

Initial value: none
Applies to: All elements except non-replaced inline elements and table elements
Inherited: No
Computed value: The percentage as specified or the absolute length or 'none'
Animatable: Yes
JavaScript syntax: object.style.maxHeight

Interactive Demo

max-height: 150px;

max-height: 7em;

max-height: 20%;

max-height: 10px;

This is a box where you can change the maximum height.
This will limit how tall the box can be, potentially causing an overflow.

Syntax

max-height: [ [<length> | <percentage>] && [border-box | content-box]? ] | available | min-content | max-content | fit-content | none

Values

<length>Specifies a fixed width. Negative values are not allowed.
<percentage>A percentage relative to the width of the containing block. If the containing block has no width explicitly set then is is treated as none. Negative values are not allowed.
max-contentThe max-content width or height.
min-contentThe min-content width or height.
availableThe containing block width or height minus margin, border, and padding.
fit-contentIf the total available space is finite, equals to min(max-content, max(min-content, fill-available)). Otherwise, equal to the max-content measure. Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers.
noneThe width has no maximum value.

Example

HTML

<div class="block"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div>

CSS

.block { 
   overflow: auto;
   padding: 10px;
   max-height: 80px; 
   background: #ffe;
   border: 1px solid #cb2027; 
}
.block p { 
   margin: 2px auto; 
}

Result

Editor