Прокручивайте только одну часть сетки в Tailwind CSS

Я работаю над макетом с использованием Tailwind CSS, который включает в себя сеточную структуру с фиксированным заголовком и основной областью контента. Основная область содержимого разделена на три части: левую, центральную и правую.

<div class = "grid min-h-screen grid-cols-[0_1fr] grid-rows-[98px_1fr] xl:grid-cols-[auto_1fr]">
  <!-- Fixed Header -->
  <div class = "sticky top-0 col-span-full row-start-1 grid grid-cols-2 grid-rows-2 items-center bg-red-500">Header</div>

  <!-- Main Content Area -->
  <main class = "col-start-2 col-end-3 row-start-2 grid grid-cols-4 sm:grid-cols-8 xl:grid-cols-12">
    <div class = "col-span-full grid grid-cols-[repeat(11,1fr)] grid-rows-[1fr]">
      <!-- Left Section -->
      <div class = "col-start-3 col-end-5 flex justify-center bg-green-500">Left</div>

      <!-- Center Section (scrollable) -->
      <div id = "overflowThisDiv" class = "col-start-5 col-end-10 overflow-y-scroll bg-white">
        <div class = "flex h-[500px] items-center justify-center bg-orange-400">Test</div>
        <div class = "flex h-[500px] items-center justify-center bg-orange-400">Test</div>
        <div class = "flex h-[500px] items-center justify-center bg-orange-400">Test</div>
      </div>

      <!-- Right Section -->
      <div class = "col-start-10 col-end-12 flex justify-center bg-black text-white">Right</div>
    </div>
  </main>
</div>

Я хочу получить прокручиваемую центральную часть (тестовые элементы), сохраняя при этом левую и правую части фиксированными. В настоящее время, когда я прокручиваю, прокручивается вся сетка, включая левую и правую части.

Как я могу изменить CSS или структуру HTML Tailwind, чтобы обеспечить вертикальную прокрутку только центральной части (тестовые элементы div), сохраняя фиксированное расположение левой и правой частей?

Все три элемента div должны иметь максимальный размер экрана по вертикали, а центральный элемент div должен быть прокручиваемым, если его содержимое превышает высоту указанного элемента div.

Можно ли также прокрутить страницу в любом месте, чтобы начать прокрутку только центрального элемента div?

Будем очень признательны за любые идеи или примеры кода.

Пример игровой площадки попутного ветра:

https://play.tailwindcss.com/WNBtszn3Ek