Html 带有一个可滚动面板的拆分视图

我正在尝试实现一个布局，其中有一个div具有最大高度，其中有两个div。一个div（页脚）具有固定高度（55px）。另一个是可滚动的div，其中的高度将根据其内容增加/减少

<div class="parent">
  <div class="wrapper">
    <div class="panel">
      Scrollable Div
    </div>
    <div class="fixed">
      Fixed footer
    </div>
  </div>
</div>

可滚动Div
固定页脚

可滚动div高度应始终适合其内容。但是当超过最大高度时（

.wrapper的最大高度为300px

），它应该只占用剩余空间减去页脚高度，而不影响页脚的位置

但是我对这个布局的理解并不符合我的要求

在我的示例中，当内容被添加到可滚动的div中时，页脚被从包装器中推出。应该做的是页脚保持在包装器的底部（不被切断），滚动div向上延伸其高度

请注意，我尽量不使用位置：固定或绝对。

这是一个移动应用程序，所以固定位置会导致很多错误

这是我到目前为止掌握的最新情况，

---

将

最大高度：300px

设置为

.panel

div

---

JS Fiddle

将

最大高度：300px

设置为

面板

div

JS小提琴