CSS Max Height Property

Question

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 scroll bars?

Answer 1

Could you have a wrapper div with the height set as your height and overflow: scrolling. Then the inner div has no height set and as it grows it will fill then use the scrollbars of the first div?

Answer 2

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

 div{
       height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */
       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.

Answer 3

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