如何让右侧列表独立内部滚动，不触发父容器及页面整体滚动？

问题核心是右侧列表的容器高度被内容无限撑开，导致overflow-auto无法触发滚动。只需调整两个地方：

1. 给右侧外层容器（.h-full.w-1/3.flex.flex-col）添加overflow-hidden，限制其高度为父容器的可用高度，避免内容撑破容器边界；
2. 给承载列表的div移除h-full，添加overflow-auto，让它通过flex-grow占据粉色header下方的剩余空间，内容超出时自动显示滚动条。

修改后的完整代码 #

<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 overflow-hidden">
        <header class="h-12 bg-pink-300"></header>
        <div class="flex-grow bg-gray-300 w-full p-3 overflow-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>

调整后，右侧列表会在粉色header下方独立滚动，main区域的其他部分和顶部header保持固定，完全符合需求。

内容的提问来源于stack exchange，提问作者Ronny Efronny