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

Question

I am scratching my head around scrolling.

I want to have a fixed App layout and a fixed content layout but a scollable content.

I have tried:

• position: fixed to the App Layout and Content Layout
• To add overflow: hidden to the Content Layout
• To add overflow-y: scroll to the container

None of this works.

Code:

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

I have search on Google and no one can clearly explain how a scrollable area works (especially when the container has a dynamic height ( flex-grow: 1 or height: 100% ).

Answer 1

you have to specify a fixed width on a container before you can use overflow-scroll

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