Question

I am trying to achieve something like a regular windows’ window with a title and a scrollable content area. The .frame shrinks to fit its variable size content and is limited only by max-width/max-height:

<div class="frame">
    <div class="title">title</div>
    <div class="content scrollable">content of variable width/height</div>
</div>

So, basically, no outer width/height are set, the .frame width/height is limited just by max-width, max-height, other than that the .frame shrinks to fit its content.
The result will look like just a regular windows window with a titlebar and variable width/height content, which should scroll if the frame’s height/width exceeds some max values.

How can it be done in CSS?

Answer 1

div.frame
{
max-width: 400px;
max-height: 200px;
overflow: auto;
}

Fiddle