Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
CSS max-height property
The CSS max-height property sets the maximum height that an element can reach. When content exceeds this maximum height, it will overflow or be clipped depending on the overflow property.
Syntax
selector {
max-height: value;
}
Possible Values
| Value | Description |
|---|---|
length |
A fixed height in px, em, rem, etc. |
percentage |
A percentage of the containing block's height |
none |
No maximum height limit (default) |
initial |
Sets to default value |
inherit |
Inherits from parent element |
Example: Text Content with Max Height
The following example shows how max-height affects text content that exceeds the specified limit −
<!DOCTYPE html>
<html>
<head>
<style>
.limited-height {
width: 400px;
max-height: 50px;
border: 2px solid green;
padding: 10px;
margin: 15px;
overflow: hidden;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<p class="limited-height">
This paragraph is 400px wide and max height is 50px.
This paragraph is 400px wide and max height is 50px.
This paragraph is 400px wide and max height is 50px.
This paragraph is 400px wide and max height is 50px.
</p>
</body>
</html>
A paragraph with a green border that is clipped at 50px height. The text overflows beyond the visible area, demonstrating how max-height limits the element's height.
Example: Container with Scrollable Content
This example shows how to combine max-height with overflow: auto to create scrollable content −
<!DOCTYPE html>
<html>
<head>
<style>
.scrollable-box {
width: 300px;
max-height: 100px;
border: 1px solid #ccc;
padding: 15px;
overflow: auto;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="scrollable-box">
<h4>Scrollable Content</h4>
<p>This is a long paragraph that will make the content exceed the maximum height.</p>
<p>When content exceeds the max-height, a scrollbar appears.</p>
<p>You can scroll to see all the content within the fixed height container.</p>
</div>
</body>
</html>
A gray container with a maximum height of 100px and a vertical scrollbar. Users can scroll to view the additional content that doesn't fit within the height limit.
Conclusion
The max-height property is useful for controlling element dimensions and preventing content from taking up too much vertical space. Combine it with overflow properties to handle content that exceeds the height limit.
Updated on: 2026-03-15T11:22:24+05:30
125 Views
Advertisements