flex-1 和 grid grid-cols-2 gap-4 不能在同一个元素上，要多一个容器，否则 flex-1 会影响 grid 容器的高度，从而影响子元素的高度

<div class="flex h-screen flex-col">
  <!-- header -->
  <div class="h-50"></div>
  <!-- body -->
  <div class="min-h-0 flex-1 overflow-y-auto">
    <!-- grid 容器 -->
    <div class="grid grid-cols-2 gap-4">
      <!-- 子元素 -->
      <div class="bg-red-400">
        <div class="h-40"></div>
      </div>
      <!-- 子元素 -->
      <div class="bg-blue-400">
        <div class="h-50"></div>
      </div>
    </div>
  </div>
  <!-- footer -->
  <div class="h-30"></div>
</div>