CSS Max Height Property

Is there a good cross-browser way to set a max-height property of a DIV and when that DIV goes beyond the max-height, it turns into an overflow with scrollbars?


Sadly IE6 doesn't so you have to use an expression for IE6, then set the max-height for all other browsers:

 div{
       _height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE6 */
       max-height: 333px; /* sets max-height value for all standards-compliant browsers */
       overflow:scroll;
}

Overflow:auto would most likely work in most cases for have any extra spill over.


I found this solution from a post made in 2005 (Min-Height Fast hack). It's a hack but it's simple and pure CSS:

selector {
  max-height:500px;
  height:auto !important;
  height:500px;
}

The example is for max-height, but it works for min-height, min-width and max-width. :)

*Note: You must use absolute values, percentages don't work.

All you need now is the "overflow:scroll;" to make this work with scroll bars