CSS max-height property is used to set maximum height of a box element. Few points to note about max-height
- It cannot be negative.
- If max-height is less that min-height, then min-height value overrides it.
CSS property max-height
| CSS version: | CSS 2.1 |
| Value: | length | percentage | none | inherit |
| Initial: | none |
| Applies to: | all elements but non-replaced inline elements, table columns, and column groups |
| Inherited: | no |
Example – max-height pixel value
<style type="text/css">
.box {
width:100px;
max-height: 50px;
overflow:auto;
background-color: lightgreen;
}
</style>
<div class="box">
This is some text where max height will not exceed 50px
</div>Example – max-height pecentage value
<style type="text/css">
.outer {
width: 100px;
height:100px;
background-color: lightgray;
}
.box {
max-height: 50%;
background-color: lightgreen;
overflow:auto;
}
</style>
<div class="outer">
<div class="box">
This is some text where max height will not exceed 50%
</div>
</div>
