Как задать скролл

Не могу задать скролл SCROLLABLE POSTS элементу. Как решить эту проблему?

<div className="flex flex-col h-screen w-full">
  {/* MAIN */}
  <main className="flex-1 px-6 py-10">
    <div className="max-w-7xl w-full mx-auto flex flex-col flex-1">
      {/* HEADER */}
      <div className="h-50">HEADER</div>
      {/* SCROLLABLE POSTS */}
      <div className="h-auto overflow-y-auto">
        <div className="h-30">POST</div>
        <div className="h-30">POST</div>
        <div className="h-30">POST</div>
        <div className="h-30">POST</div>
      </div>
    </div>
  </main>

  {/* FOOTER (фиксируется внизу) */}
  <Footer navElements={[...navElemets].sort((a, b)=> a.mobPos - b.mobPos)}
    className="flex-shrink-0"
    />
</div>