如何在Tailwind中实现中间列控高的三列等高及滚动布局

要实现中间列主导高度、左右列等高且右侧列拆分滚动区与输入区的布局，可按以下方式调整代码：

<div class="grid grid-cols-12">
  <!-- 左侧列：滚动内容，高度与中间列一致 -->
  <div class="col-span-2 flex flex-col gap-2 overflow-y-auto border border-indigo-500 h-full">
    <div>Character X</div>
    <div>Character X</div>
    <div>Character X</div>
    <div>Character X</div>
    <div>Character X</div>
    <div>Character X</div>
    <div>Character X</div>
    <div>Character X</div>
    <div>Character X</div>
    <div>Character X</div>
    <div>Character X</div>
    <div>Character X</div>
    <div>Character X</div>
  </div>

  <!-- 中间列：作为高度基准，16:8宽高比 -->
  <div class="col-span-8 aspect-[16/8] bg-gray-100 flex items-center justify-center">
    THIS DICTATES THE HEIGHT OF THE COLUMNS
  </div>

  <!-- 右侧列：拆分滚动内容区与输入区 -->
  <div class="col-span-2 flex flex-col h-full">
    <!-- 滚动内容区：自动占满剩余高度 -->
    <div class="flex-1 overflow-y-auto space-y-2 p-2">
      <div class="h-20 bg-gray-200 flex items-center justify-center">
        This is a message
      </div>
      <div class="h-20 bg-gray-200 flex items-center justify-center">
        This is a message
      </div>
      <div class="h-20 bg-gray-200 flex items-center justify-center">
        This is a message
      </div>
      <div class="h-20 bg-gray-200 flex items-center justify-center">
        This is a message
      </div>
      <div class="h-20 bg-gray-200 flex items-center justify-center">
        This is a message
      </div>
      <div class="h-20 bg-gray-200 flex items-center justify-center">
        This is a message
      </div>
    </div>
    <!-- 输入区：固定高度/自适应内容高度 -->
    <div class="border-t border-gray-300 p-2">
      <input type="text" placeholder="Type a message..." class="w-full p-2 border rounded">
    </div>
  </div>
</div>

关键调整点说明 #

• 中间列高度控制：使用aspect-[16/8]实现自定义16:8宽高比（Tailwind默认aspect-video为16:9，需手动指定目标比例），该列高度会随宽度自动计算，成为整个网格布局的高度基准。
• 左右列等高适配：给左右列添加h-full，配合Grid布局默认的等高特性，确保两列高度与中间列完全对齐，列内元素填满整个高度。
• 右侧列区域拆分：右侧列设置为flex flex-col垂直布局，滚动内容区添加flex-1使其自动占据输入区外的剩余空间，同时通过overflow-y-auto实现内容溢出时滚动；输入区保留自身高度，固定在列底部。
• 左侧列滚动处理：左侧列采用flex flex-col+overflow-y-auto组合，内容过多时可滚动，同时h-full保证列高度与中间列匹配。

内容的提问来源于stack exchange，提问作者Bruno Francisco