隐藏父级滚动条仅显示子级滚动条的正确实现及问题解决

问题根源出在容器高度的分配逻辑上：

• 原代码里的flex-col容器没设置高度，导致main的h-full无法继承到正确的可用空间，overflow-y-auto自然不会触发滚动条。
• 换成max-h-screen时，main直接取屏幕总高度，而导航栏占了h-12的空间，导致内容底部刚好被导航栏高度的部分截断。

修复方法： #

1. 给最内层的flex-col容器加上h-full，让它占满外层h-screen的高度；
2. 给main元素加上flex-1，让它自动填充导航栏之外的剩余空间；
3. 内部两个内容区保留h-full overflow-y-auto，内容超出时就会正常显示滚动条，且不会超出视口范围。

修改后的代码： #

<div class="h-screen overflow-hidden"> 
  <div class="flex flex-col h-full">
    <div class="h-12">Navbar </div>
    <main class="flex flex-row flex-1">
      <div class="w-1/5 h-full overflow-y-auto flex-col flex-grow bg-purple-50">Lorem... </div>
      <div class="w-4/5 bg-gray-50 h-full overflow-y-auto">Lorem... </div>
    </main>
  </div>
</div>

内容的提问来源于stack exchange，提问作者yumba