CSS max-height Property

The max-height property defines the maximum height an element is allowed to reach, preventing it from becoming taller than the specified value.

selector { max-height: value; }
none The default value which places no limit on the height of the element.
<length> Specifies a fixed maximum height using units like px, em, rem, or vh.
<percentage> Sets the maximum height as a percentage relative to the height of the containing block.
max-content The intrinsic preferred height based on the content inside the element.
min-content The intrinsic minimum height based on the content inside the element.
fit-content(<length-percentage>) Uses the fit-content formula where the available space is replaced by the specified argument.

Code Examples

A basic container with a fixed max-height and a scrollbar to handle overflowing content.

<div style="max-height: 150px; overflow: auto; border: 1px solid #333333; padding: 10px;">
  <p>This box has a max-height of 150 pixels. If you add enough text here to exceed that height, a scrollbar will appear because we have the overflow property set to auto. This prevents the box from growing indefinitely and breaking the surrounding layout flow.</p>
  <p>More content goes here to demonstrate the scrolling capability once the 150px ceiling is reached by the rendering engine.</p>
</div>

An advanced implementation using JavaScript and CSS transitions to create a smooth sliding drawer effect by toggling max-height.

<style>
  .drawer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    background: #f4f4f4;
  }
  .drawer.open {
    max-height: 500px;
  }
</style>

<button onclick="toggleDrawer()">Toggle Content</button>
<div id="contentDrawer" class="drawer">
  <div style="padding: 20px;">
    <p>This is hidden content that slides down when the button is clicked.</p>
    <p>We use a large max-height value for the open state to allow for varying content amounts.</p>
  </div>
</div>

<script>
function toggleDrawer() {
  const drawer = document.getElementById("contentDrawer");
  drawer.classList.toggle("open");
}
</script>

Pro Tip

You can create a smooth "slide down" animation for accordions using max-height. Since you cannot animate to height: auto, you can set the closed state to max-height: 0 and the open state to a max-height value that you know is taller than your content, like 1000px. Transitioning between these two values gives you a clean opening and closing effect without needing complex math to find the exact pixel height of the inner content.

Deep Dive

Think of max-height as a physical ceiling in a room. Your content is like a person who can grow or shrink, but once their head hits that ceiling, they cannot go any higher. In the browser, an element will naturally expand to fit its content unless this property is set. If the content attempts to exceed the max-height, the element's height is locked at that limit. By default, the extra content will simply hang out of the bottom of the box, which is why we usually pair this with the overflow property to manage that extra baggage.

Best Practices

Use max-height to create flexible, responsive components like cards or modals that should shrink to fit small content but never exceed a certain size on large screens. It is extremely useful for images to ensure they do not blow up too large and break your layout. Always consider adding "overflow-y: auto" if there is a possibility that the content inside might exceed the max-height, providing a scrollbar so the user can actually reach the hidden information.

Common Pitfalls

One big trip-up for developers is using percentages. A percentage value for max-height is calculated relative to the height of the parent container. If the parent does not have an explicit height set, the percentage will often resolve to "none," making it look like your code is broken. Also, remember that max-height overrides the standard height property; if you set height to 500px but max-height to 200px, the element will stay at 200px.

Accessibility

Be careful not to cut off important text or interactive elements. If you set a max-height and hide the overflow, users who rely on screen magnifiers or those who have increased their default browser font size might lose access to information that has been pushed outside the visible area. Ensure that any container with restricted height is either scrollable or provides a way to reveal the hidden content.

Dev Data Table: max-height property

default none
animatable yes
inherited no
experimental no
year_intro 1998
year_standard 1998
js_syntax_1 element.style.maxHeight = "500px";
js_syntax_2 element.style.setProperty("max-height", "500px");
js_note When manipulating this property in JavaScript, ensure the value is passed as a string including the unit, such as "px" or "%".
browsers { "Chrome": 1, "Edge": 12, "Firefox": 1, "Safari": 1, "Opera": 7, "Chrome Android": 18, "Safari on iOS": 1, "Samsung Internet": 1, "Opera Mobile": 10.1 }
results render here...