我在理解div高度和溢出的概念上遇到了巨大的困难。我已经找了两天了，但是我想我在这里漏掉了一个关键的概念...
我的布局如下所示（Tailwind Playground）：

蓝色的div不能一直滚动到内容的结尾，因为某些原因，div认为它的高度比实际的要大（正好是它上面第二个导航栏（红色）的高度），结果，我不能一直滚动到底部。
此外，必须为每个子div重复h-full，直到我到达我想要滚动的div，这对我来说似乎是不合适的，但除此之外，它假设h-auto，这是不好的。

<div class="h-screen overflow-hidden">
  <div class="flex h-full flex-col overflow-hidden">
    <div class="w-full bg-slate-500 text-center text-white h-12 ">NAVBAR</div>
    <div class="flex h-full overflow-hidden">
      <div class="flex h-full basis-1/6">
        <div class="w-full bg-gray-300 text-center text-black">Sidebar</div>
      </div>

      <div class="flex h-full grow flex-col bg-slate-500">
        <div class="h-12 w-full shrink-0 bg-red-400 text-center">Second Navbar</div>
        <div class="h-full w-full grow bg-green-400">
          <div class="flex h-full">
            <div class="w-1/3 bg-blue-400 text-center">
              <div class="flex h-full flex-col overflow-y-scroll">
                <div>
                  Lorem....
                </div>
              </div>
            </div>
            <div class="h-full w-2/3 overflow-y-scroll bg-orange-400 text-center">Main content</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>