CSS max-height Property

Description

The max-height property defines an upper limit on how tall an element is allowed to become. It acts as a ceiling: regardless of content, intrinsic size, or layout behavior that would otherwise increase the element’s size, the element will not be rendered taller than the maximum. That makes max-height useful for preventing an element from overtaking the viewport or a container when its content grows unpredictably. When both an explicit height and a maximum are present, the computed layout respects the constraint - the element cannot exceed the specified maximum even if the specified height would otherwise allow it.

The property interacts closely with other sizing and box-model rules. For example, min-height can force an element to be at least a certain size; if a min-height value is larger than the max-height value, that minimum will effectively take precedence and the element will end up at that minimum. How the limit is applied also depends on the element’s box configuration: the box-sizing model determines whether padding and border are included inside or added outside the used height, which changes the visual effect of the maximum. Percentage-based maximums resolve relative to the containing block’s height, so using a percentage only constrains the element if its containing block has a definite height.

When content would exceed the cap set by max-height, the overflow behavior determines what the user actually sees. Pairing max-height with overflow lets you choose whether excess content is clipped, hidden, or made scrollable, which is a common pattern for scrollable panels and modal content areas. In UI patterns like accordions or collapsible panels, developers frequently rely on max-height to limit expansion and to create controlled transitions; however, transitions involving intrinsic or non-explicit target sizes can be tricky and sometimes require explicit numeric limits to animate predictably.

In practical layouts, max-height is a powerful defensive tool: it keeps components from growing without bound, supports responsive design by constraining elements across different viewport sizes, and helps maintain visual rhythm when combined with spacing and overflow strategies. It should be used thoughtfully alongside min/max constraints and the box model so the intended visual result is predictable across different content loads and layout contexts.

Definition

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="example">

    <h2>CSS max-height examples</h2>

    <div class="panel">

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>

        <p>Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.</p>

        <p>Fusce nec tellus sed augue semper porta. Mauris massa.</p>

    </div>

    <div class="image-row">

        <img src="https://placehold.co/600x400" alt="Placeholder image" class="constrained">

        <div>

            <p><strong>Image constrained with max-height:</strong></p>

            <p>The image keeps its aspect ratio while not exceeding the max-height.</p>

        </div>

    </div>

</div>

CSS

.example {
    font-family: Arial, sans-serif;
    max-width: 700px;
    margin: 20px auto;
}

.panel {
    background: #f3f4f6;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    max-height: 120px; /* limits height */
    overflow: auto;    /* enables scrolling when content exceeds max-height */
}

.panel p {
    margin: 0 0 12px;
    line-height: 1.4;
}

.image-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.constrained {
    max-height: 80px; /* image will not grow taller than this */
    width: auto;      /* preserves aspect ratio */
    border-radius: 4px;
    display: block;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS max-height property. Hover over a browser icon to see the version that first introduced support for this CSS property.