<div class="flex h-screen flex-col">
  <!-- header -->
  <div class="h-40 bg-green-300"></div>
  <!-- body 自适应高度 -->
  <div class="flex min-h-0 flex-1 flex-col bg-red-300">
    <!-- body 内的 header  -->
    <div class="h-20 bg-blue-300"></div>
    <!-- 
      body 内的内容自适应高度，父元素 min-h-0 是关键，flex-item 默认 min-h 的
      默认值是 auto，flex-item 的高度超过父元素的高度，父元素会一直被子元素撑大 
    -->
    <div class="flex-1 overflow-y-auto">
      <div class="h-screen"></div>
    </div>
    <!-- body 内的 footer  -->
    <div class="h-20 bg-pink-300"></div>
  </div>
  <!-- footer -->
  <div class="h-40 bg-yellow-300"></div>
</div>