使用Tailwind无法让#projects div自适应剩余空间并实现滚动

你当前通过固定视口高度计算的方式不够灵活，且因父容器缺少正确的布局约束，导致高度设置未达到预期效果。改用Tailwind的flex布局就能完美实现需求：

修改步骤： #

• 给#projects的父容器（灰色背景的col-span-8 div）添加flex flex-col h-full，使其成为垂直方向的flex容器并占满可用高度
• 把标题栏的mb-8改为mb-8 flex-shrink-0，确保标题不会被压缩变形
• 给#projects移除硬编码的h-[calc(100vh - 16rem)]，替换成flex-1 overflow-y-auto，让它自动填充父容器的剩余空间，内容溢出时自动显示滚动条

修改后的完整代码： #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://cdn.tailwindcss.com"></script>
  <title>tipt</title>
</head>

<body>
  <div class="grid grid-cols-12 h-screen overflow-hidden">
    <div class="col-span-3 h-full bg-black"></div>
    <div class="col-span-9 h-full flex flex-col">
      <header class="h-16 w-full bg-blue-500"></header>
      <main class="flex-1 w-full">
        <div class="grid h-full grid-cols-12">
          <!-- 父容器添加flex布局与高度约束 -->
          <div class="bg-gray-500 text-gray-50 p-8 col-span-8 flex flex-col h-full">
            <!-- 标题栏设置不压缩 -->
            <div class="flex items-center justify-between mb-8 p-0 flex-shrink-0">
              <span>All projects</span>
            </div>
            <!-- 自适应剩余空间并开启滚动 -->
            <div id="projects" class="flex flex-col gap-5 overflow-y-auto flex-1">
              <div class="project h-[60px] bg-red-500"></div>
              <div class="project h-[60px] bg-red-500"></div>
              <div class="project h-[60px] bg-red-500"></div>
              <div class="project h-[60px] bg-red-500"></div>
              <div class="project h-[60px] bg-red-500"></div>
              <div class="project h-[60px] bg-red-500"></div>
              <div class="project h-[60px] bg-red-500"></div>
              <div class="project h-[60px] bg-red-500"></div>
              <div class="project h-[60px] bg-red-500"></div>
              <div class="project h-[60px] bg-red-500"></div>
              <div class="project h-[60px] bg-red-500"></div>
            </div>
          </div>
          <aside class="col-span-4 bg-green-500"></aside>
        </div>
      </main>
    </div>
  </div>
</body>

</html>

原理说明： #

• flex-1属性让#projects自动填充父容器的剩余垂直空间，无需手动计算高度，适配各种屏幕尺寸
• flex-shrink-0保证标题栏始终保持原有高度，不会被flex容器压缩
• overflow-y-auto在内容超出容器高度时自动显示垂直滚动条，内容较少时则隐藏滚动条，兼顾美观与实用

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