无法用Tailwind实现div溢出滚动：让#projects占满剩余空间并可滚动

问题 #

需要让#projects div占据页面剩余空间，内容过多时可滚动。当前使用固定高度h-96，但需求是占满全部剩余空间；同时body设置了overflow:hidden，导致超出的10个ProjectItem元素无法显示。

解决方案 #

核心是利用Flex布局的flex-1属性让容器自动填充剩余空间，同时确保上层容器的高度约束正确：

• 确保最外层的grid容器（带flex-1类）的父级容器设置min-h-screen或能占据整个视口高度，为flex-1提供空间分配的基础。
• 确认#projects的直接父容器（col-span-12 flex-col的div）已设置flex-1，保证它在grid布局中占满可用空间；由于是垂直flex布局，内部的#projects通过flex-1会自动填充顶部标题栏之外的剩余区域。
• 保留#projects的overflow-y-auto，内容超出时自动显示垂直滚动条。

修改后的代码示例 #

<!-- 最外层容器设置min-h-screen，确保占满视口高度 -->
<div class="min-h-screen flex flex-col">
  <!-- 页面其他顶部/侧边内容 -->
  <div class="grid flex-1 grid-cols-12">
    <div class="col-span-12 flex flex-col bg-gray-800 text-gray-50 md:p-8 xl:col-span-8">
      <div class="flex items-center justify-between p-5 md:mb-8 md:p-0">
        <span class="text-[16px] font-semibold tracking-wide md:text-[14px]">All projects</span>
        <MenuDropdown />
      </div>
      <div id="projects" class="flex-1 overflow-y-auto">
        <ProjectItem v-for="project in projects" :key="project.id" :project="project" />
      </div>
    </div>
  </div>
</div>

关键说明 #

• min-h-screen：让最外层容器至少占满整个视口高度，为内部flex-1的空间分配提供基准。
• 父容器的flex-col + flex-1：保证垂直布局下，子元素按比例分配空间，#projects的flex-1会自动填充标题栏之外的所有剩余空间。
• overflow-y-auto：当#projects内内容高度超过容器高度时，自动显示垂直滚动条，同时适配body的overflow:hidden设置，不会触发页面整体滚动。

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