Question

I am trying to implement a DIV which contains some text, and behaves the following way:

• Fixed width (500px)

• Capped height (Up to 400 px)

  1. If the text renders to <400px (say, 100px tall), the containing DIV is as much height as text (100px in our example).

  2. If the text renders to >400px, the containing div is only 400px in height, and oveflow is handled via a vertical scrollbar in the DIV.

I know how to implement #2 (overflow: auto; position: relative) but that behavior depends on having height=400px which of course negates #1 desired behavior.

How can this be achieved via CSS?

I’d prefer a reasonably cross-platform soluion, if that’s too hard, must work on IE7, IE8 and FireFox 10+.

Answer 1

Try a combination of max-height and overflow: auto;.

Example.