html - 如何在内容区域制作一个具有最大高度和滚动条的收缩容器？

Question

我正在尝试实现类似于带有标题和可滚动内容区域的常规 Windows 窗口。 .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 内容的常规 Windows 窗口，如果框架的 height/width 超过了一些最大值。

如何在 CSS 中完成？

Answer 1

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

Fiddle