如何使用动态高度容器创建可滚动区域

Question

我在滚动时挠头。

我想要一个固定的应用程序布局和固定的内容布局，但有一个可搜索的内容。

我试过：

• position: fixed到应用程序布局和内容布局
• 将overflow: hidden添加到内容布局
• 将overflow-y: scroll添加到容器

这些都不起作用。

代码：

链接：https://play.tailwindcss.com/

<div class="w-screen h-screen">
<div class="border border-black w-full h-full grid grid-cols-[100px_1fr] grid-rows-[50px_1fr] fixed">
<header class="border border-black row-start-1 row-end-2 col-span-2">Header</header>
<aside class="border border-black row-start-2 row-end-3 col-start-1 col-end-2">Sidebar</aside>
<main class="border border-black row-start-2 row-end-3 col-start-2 col-end-3">
<div class="border border-black w-full h-full flex flex-col fixed">
<div class="border border-black w-full h-[50px]">Header</div>
<div class="border border-black flex-grow flex px-3">
<div class="border border-black w-[90px]">Sidebar</div>
<div class="border border-black flex-grow overflow-hidden">
<div class="border border-black overflow-y-scroll">
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
<div class="">Content</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>

我在谷歌上搜索过，没有人能清楚地解释可滚动区域是如何工作的(尤其是当容器具有动态高度(flex-grow: 1或height: 100%(时(。

Answer 1

在使用溢出滚动之前，必须在容器上指定固定宽度

<div class="border border-black w-[200px] overflow-y-scroll">
<div class="">Content</div>
<div class="">Content</div>
...