如何使用动态高度容器制作可滚动区域

Question

我正在为滚动而挠头。

我想要一个固定的 App 布局和一个固定的内容布局，但要有一个可滚动的内容。

我试过：

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

None 的作品。

代码：

<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>

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

Answer 1

您必须在容器上指定固定宽度才能使用 overflow-scroll

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

如何使用动态高度容器制作可滚动区域

How do I make a scrollable area with a dynamic height container

html

css

layout

scroll

代码：