Definition
The max-height CSS property is used to set the maximum height that an element can have. It restricts the height of the element to a specified value, preventing it from exceeding that limit.
The max-height property accepts various length units, such as pixels (px), percentages (%), viewport height (vh), or the none keyword.
Here’s an example:
.container {
max-height: 300px;
}
In this example, the .container class sets a maximum height of 300px for the element. If the content inside the element exceeds this height, it will be automatically truncated or overflowed based on the overflow property.
You can also use other length units or percentage values to set a relative maximum height:
.container {
max-height: 50%;
}
In this case, the .container class sets a maximum height of 50% of its containing element’s height. This allows the element to adjust its height based on the available space.
The max-height property is useful when you want to limit the height of an element, preventing it from growing beyond a certain point. It is commonly used to control the size and overflow behavior of elements, ensuring a consistent and visually appealing layout.