我正在尝试创建一个Tailwind布局，它有一个固定高度的页眉，一个固定宽度的侧边栏和内容，其中页眉保持在页面的顶部，侧边栏和内容区域滚动。

<div class="flex flex-col h-screen">
  <header class="bg-green-500 h-20 shrink-0">
    header
  </header>
  <div class="flex flex-row h-full">
    <aside class="bg-red-500 w-1/3 overflow-y-scroll">
      aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside
    </aside>
    <main class="bg-blue-500 w-2/3 overflow-y-scroll">
      main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>
    </main>
  </div>
</div>

(jsfiddle here)
但是文档的主体上仍然有一个滚动条，用于显示页眉的高度，这是一个Airbnb风格的页面，在<aside>中会有几十个列表，在<main>中会有一个Map，所以对于两者来说，重要的是只占用页眉高度之后文档中剩余的垂直空间，不要超过这个数量，而是使用overflow-y: scroll。
需要说明的是，如果<aside>或<main>的内容在垂直方向上没有填满所有的空间，就应该将其拉伸以填满，但是如果这些元素的内容超出了文档的垂直空间（减去页眉），就应该将其夹住并滚动溢出部分。