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

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-height，除了 .frame 会缩小以适应其内容。 结果看起来就像一个带有标题栏和可变 width/height 内容的常规 Windows 窗口，如果框架的 height/< 则该窗口应该滚动code>width 超过了一些最大值。

在 CSS 中如何实现呢？

Answer 1

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

小提琴