我试图实现一个布局，其中有一个最大高度的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高度应该始终符合它的内容。但是当超过最大高度（.wrapper has a max-height of 300px）时，它应该只占用剩余空间减去页脚高度而不影响页脚的位置。
但我所取得的这种布局并不符合我的要求。
在我的示例中，当内容被添加到可滚动div中时，页脚会被推出包装器。应该发生的是页脚保留在包装器的底部（没有被切断），并且可滚动的div可以向上跨越它的高度。
请注意我尝试不使用位置：固定或绝对。
这适用于移动应用，因此固定位置会导致很多错误。
这是迄今为止我所拥有的JS小提琴， fiddle