請看下面的片段。 我設法制作了沒有標題的主滾動，但是沒有main的其余部分，我無法在內部制作右邊滾動的列表。 我想在右邊的框列表，自己滾動，留下粉紅色的標題和主要的其余部分。

我嘗試將overflow-auto應用于包含子元素的div，但是沒有成功。 我還試著在它的父節點上設置overflow-hidden，但這只會完全阻止滾動。

我知道有很多像這樣的問題，但我發現沒有一個解決方案對我有效，所以我在這里重現了我的案例。

html, body {
  height: 100%;
  width: 100%;
}

<script src="https://cdn.tailwindcss.com"></script>

<div class="flex flex-col w-full h-full">
  <header class="h-16 bg-red-300"></header>
  <main class="flex-grow w-full overflow-auto bg-green-300">
    <div class="flex w-full h-full bg-blue-300">
      <div class="h-full w-1/3 bg-purple-300"></div>
      <div class="h-full w-1/3 flex-grow bg-yellow-300"></div>
      <div class="h-full w-1/3 flex flex-col bg-indigo-300">
        <header class="h-12 bg-pink-300"></header>
        <div class="flex-grow bg-gray-300 w-full h-full p-3">
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
        </div>
      </div>
    </div>
  </main>
</div>

html, body {
  height: 100%;
  width: 100%;
}

<script src="https://cdn.tailwindcss.com"></script>

<div class="flex flex-col w-full h-full">
  <header class="h-16 bg-red-300"></header>
  <main class="flex-grow w-full overflow-auto bg-green-300">
    <div class="flex w-full h-full bg-blue-300">
      <div class="h-full w-1/3 bg-purple-300"></div>
      <div class="h-full w-1/3 flex-grow bg-yellow-300"></div>
      <div class="h-full w-1/3 flex flex-col bg-indigo-300">
        <header class="h-12 bg-pink-300 shrink-0"></header>
        <div class="flex-grow bg-gray-300 w-full h-full p-3 overflow-y-auto">
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
          <div class="w-full border border-blue h-10"></div>
        </div>
      </div>
    </div>
  </main>
</div>

如果我沒弄錯的話，你只是想讓右邊的灰色列表在內部滾動，而不是像現在這樣讓整個主體都可以滾動。

我看到您已經嘗試將overflow-auto應用于包含子元素的div，并在其父元素上設置overflow-hidden。我不知道為什么它對你不起作用，但是我對你的代碼做了類似的修改，它起作用了。也許你沒有同時應用這兩個屬性。

首先，將主元素設置為溢出隱藏。

<main class="w-full flex-grow overflow-hidden bg-green-300">

第二，將灰名單部分設置為自動溢出。

<div class="h-full w-full flex-grow overflow-auto bg-gray-300 p-3">

這里是順風游樂場，有了這個變化。