Как сделать сжатый контейнер с максимальной высотой и полосами прокрутки в области содержимого?

Question

Я пытаюсь добиться чего-то вроде обычного окна с заголовком и прокручиваемой областью содержимого..frame сжимается, чтобы соответствовать его содержимому переменного размера, и ограничивается только max-width / max-height:

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

Таким образом, в основном, внешние width / height не установлены,.frame width / height ограничивается только max-width, max-height, за исключением того, что .frame уменьшается в соответствии с его содержимым.Результат будет выглядеть как обычное окно с заголовком и переменным содержимым width / height, которое должно прокручиваться, если height / width фрейма превышает некоторые максимальные значения.

Как можноэто будет сделано в CSS?

Answer 1

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

Fiddle