CSS max-height – limit maximum height of an element

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>
refresh

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>
refresh

Specification

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments