EN
CSS - set element max height
0
points
In this article, we would like to show you how to set element max height using CSS.
Quick solution:
.element {
max-height: 100px;
}
Practical example
In this example, we use max-height CSS property to set element maximum height to 100px. If the height property percentage value will be calculated to more than 100px, the max-height property will prevent the element from expanding vertically.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body {
height: 200px;
}
div.element {
height: 90%; /* sets height to 90% of parent (body) height */
max-height: 100px;
background: orange;
}
</style>
</head>
<body>
<div class="element">Example text inside ...</div>
</body>
</html>