嵌套布局中Div高度与Overflow问题：子元素无法完整滚动

修正后的代码 #

<div class="h-screen overflow-hidden">
  <div class="flex h-full flex-col">
    <div class="w-full bg-slate-500 text-center text-white h-12">NAVBAR</div>
    <!-- 用flex-1替代h-full，自动填充导航栏剩余的屏幕高度 -->
    <div class="flex flex-1 overflow-hidden">
      <div class="basis-1/6 bg-gray-300 text-center text-black">Sidebar</div>

      <div class="flex flex-1 flex-col bg-slate-500">
        <div class="h-12 w-full shrink-0 bg-red-400 text-center">Second Navbar</div>
        <!-- 用flex-1替代h-full，填充二级导航下方的剩余空间 -->
        <div class="flex flex-1 bg-green-400">
          <div class="w-1/3 bg-blue-400 text-center">
            <div class="h-full flex flex-col overflow-y-scroll">
              <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              </div>
            </div>
          </div>
          <div class="w-2/3 overflow-y-scroll bg-orange-400 text-center">
            Main content
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

问题1：蓝色div无法滚动到底部的原因与解决 #

你遇到的核心问题是高度计算溢出：

• 包含红色二级导航和蓝色区域的父级用了h-full，但它是flex-col布局，红色导航已经占了h-12的高度。
• 蓝色区域再设置h-full，会继承父级的完整高度，导致蓝色区域的实际高度 = 父级高度 + 红色导航高度，超出了可视范围，底部内容被遮挡。

解决办法：

• 给蓝色区域的容器替换为flex-1（对应CSS的flex: 1 1 0%），让它自动填充红色导航下方的剩余空间，高度不会超出父级容器。
• 同时，给包含二级导航的父级设置flex flex-1 flex-col，确保它在上级flex布局中自动填充屏幕剩余高度。

问题2：层层设置h-full的优化方案 #

你觉得重复设置h-full不合理，本质是因为块级元素默认height: auto，只有父元素有明确高度（比如h-screen、h-full，或flex布局中被分配了确定空间），子元素的h-full才能生效。

优化方式：

• 尽量用flex布局的flex-1分配剩余空间，减少对h-full的依赖。比如最外层导航栏下方的区域，用flex-1替代h-full，自动填充屏幕剩余高度，内部子布局再通过flex嵌套分配空间。
• 对于侧边栏这类不需要额外嵌套的元素，直接用basis-1/6即可，因为父级是flex布局，子元素会自动拉伸高度，不需要外层再加flex h-full。

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