如何在内容区域中制作具有最大高度和滚动条的缩小容器？

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