使粘性元素与另一个具有动态高度的元素堆叠在一起

Question

我正在为网站做新的布局，我尝试尽可能地清理html。基本上，我希望两个粘性元素彼此重叠，而第一个可以具有动态高度。请参见此codepen以查看我要实现的目标（它为第一个元素使用了静态高度，因此此处没有pb）。

html

UITextField

css

<div class="container">
  <div class="sub main">main</div>
  <div class="sub top">top</div>
  <div class="sub bottom">bottom</div>
</div>

我知道我可以很容易地使用外部容器来实现此目的，但是我希望能够将其中一个元素放在页面顶部，而另一个元素放在底部，而将主要元素放在页面中间媒体查询范围更窄（移动）。我当时在考虑显示网格，但这可能不是我需要的最佳解决方案 有没有人已经取得了类似的成就？ 预先感谢