如何让3根柱子高度与顺风溢出相同

Question

我想要顺风时有 3 根相同高度的立柱。

-------------------------------------------------------------------------------------
|                    |                                         |                    |
|                    |                                         | SCROLLABLE CONTENT |
| SCROLLABLE CONTENT | THIS DICTATES THE HEIGHT OF THE COLUMNS |                    |
|                    |                                         | -------------------|
|                    |                                         |        INPUT       |
-------------------------------------------------------------------------------------

基本上，中间的列将决定所有其他列的高度（这将是视频大小的宽高比 - 16:8）。

我已经尝试过：

<div class="grid grid-cols-12">
  <div class="col-span-2 flex flex-col gap-2 overflow-y-auto border border-indigo-500">
    <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>
  <div class="col-span-8 aspect-video max-h-max">THIS DICTATES THE HEIGHT OF THE COLUMNS</div>
  <div class="col-span-2 overflow-y-auto">
    <div class="h-20 bg-gray-200">
      This is a message
    </div>
    <div class="h-20 bg-gray-200">
      This is a message
    </div>
    <div class="h-20 bg-gray-200">
      This is a message
    </div>
    <div class="h-20 bg-gray-200">
      This is a message
    </div>
    <div class="h-20 bg-gray-200">
      This is a message
    </div>
    <div class="h-20 bg-gray-200">
      This is a message
    </div>
  </div>
</div>

THIS DICTATES THE HEIGHT OF THE COLUMNS

div 应决定两个相邻列的高度：

如何让中间的列决定其他两列的高度，并在右列上制作

SCROLLABLE CONTENT

以便在

input

旁边占据尽可能多的空间？

Answer 1

您可以通过不使用网格、使用相对和绝对定位来实现这一点

<div class="relative w-full">
  <div class="absolute bottom-0 left-0 top-0 col-span-2 flex w-1/6 flex-col gap-2 overflow-y-auto border border-indigo-500">
    <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>
  <div class="mx-auto aspect-video w-2/3">THIS DICTATES THE HEIGHT OF THE COLUMNS</div>
  <div class="absolute bottom-0 right-0 top-0 col-span-2 flex w-1/6 flex-col overflow-hidden">
    <div class="flex-1 overflow-y-auto">
      <div class="h-20 bg-gray-200">This is a message</div>
      <div class="h-20 bg-gray-200">This is a message</div>
      <div class="h-20 bg-gray-200">This is a message</div>
      <div class="h-20 bg-gray-200">This is a message</div>
      <div class="h-20 bg-gray-200">This is a message</div>
      <div class="h-20 bg-gray-200">This is a message</div>
    </div>

    <input type="text" class="border border-indigo-500" />
  </div>
</div>

希望这能回答您的问题！