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

【问题标题】：How do I make a scrollable area with a dynamic height container如何使用动态高度容器制作可滚动区域
【发布时间】：2022-01-23 00:57:38
【问题描述】：

我在滚动时摸不着头脑。

我想要一个固定的 App 布局和一个固定的内容布局，但是一个可缩放的内容。

我试过了：

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>

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

【问题讨论】：

标签： html css layout scroll

【解决方案1】：

你必须在容器上指定一个固定宽度才能使用溢出滚动

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

【讨论】：

我想避免使用固定宽度来适应最终用户的屏幕。我可以使用带有 px 和 calc 的布局，但我更愿意使用 flex-direction: column 和 flexGrow: 1
@eakl 您只需使用w-[100vw] 而不是我使用的w-[200px]。这将确保容器容纳 100% 的用户屏幕宽度。这是一个实际的例子：play.tailwindcss.com/Y3nf5YWvyM