如何实现div占满可用空间且页面不溢出，仅表格区域局部滚动？

你的核心问题出在两个地方：默认浏览器样式导致的页面溢出，以及滚动内容使用了视口单位（vw）打破了容器的宽度约束。以下是具体修复方案：

修复步骤 #

• 重置body默认边距：浏览器默认给body添加了margin，这会让你设置了w-screen h-screen的最外层容器超出视口，触发页面滚动。给body加上m-0类即可解决。
• 替换滚动内容的视口单位：w-[200vw]是基于视口宽度的，会让内容直接超出页面范围，而不是滚动容器的边界。改用固定宽度（如w-[1200px]）或min-w-max让内容自然撑开，这样滚动容器的overflow-auto才能正确触发内部滚动。
• 确保父级容器高度约束完整：你的层级结构已经用flex-grow和h-full做了高度传递，保持这个结构即可确保滚动容器有明确的高度范围。

修改后的完整代码 #

<body class="m-0">
  <div class="h-screen w-screen bg-teal-100 flex overflow-hidden">
    <!-- Toolbar with a fixed width -->
    <div class="h-full bg-blue-50" style="width: 100px;">Toolbar</div>

    <!-- Container for Sidebar and Content 1, taking up the remaining width -->
    <div class="flex-grow h-full bg-orange-50 flex">
      <!-- Sidebar with a fixed width -->
      <div class="bg-purple-50" style="width: 200px;">Sidebar</div>

      <!-- Content 1 taking the remaining space -->
      <div class="flex-grow h-full bg-indigo-500 flex flex-col">
        <div class="bg-green-50">A</div>
        <div class="bg-purple-50">B</div>
        <div class="flex-grow bg-teal-200 flex flex-col">
          <div class="bg-green-50">Header</div>

          <!-- Table div with growing and scrolling capability -->
          <div class="flex-grow bg-red-200 overflow-auto">
            <!-- Oversized content to demonstrate scrolling -->
            <div class="w-[1200px] h-[200vh] text-white">
              H (large content here to activate scrolling)
            </div>
          </div>

          <div class="bg-purple-50">Footer</div>
        </div>
      </div>
    </div>
  </div>
</body>

修改后，页面整体不会出现滚动条，只有红色的表格容器会在内容超出时显示自身的滚动条。

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