Why is my inner div not scrollable? (TailwindCSS)

I have the following layout made with React and TailwindCSS. It is supposed to be a chatbot, which I am making while learning React. I need the inner div with id="messages" to be scrollable, so the user can scroll through the message history. Though, at the moment the div is not scrollable, and older messages disappear behind the h1 and out of view of the screen. How can I make it scrollable?

const Chat = () => {
  return (
    <div className="flex flex-col items-center h-screen justify-between">
      <div className="flex justify-center w-full">
        <h1 className="text-3xl font-bold my-5">Golfdommer</h1>
      </div>
      <div id="messages" className="flex flex-col w-full h-full justify-end overflow-y-auto"> // <-- this div
          {messages.map((message, index) => {
            if (message.role === "user") {
              return <UserMessage key={index} text={message.content} />;
            }
            return <BotMessage key={index} text={message.content} />;
          })}
      </div>
      <form
          onSubmit={handleInputSubmit}
          className="flex flex-row w-full mb-5 mt-2"
        >
          <textarea
            className="border-2 rounded-md p-3 w-full mr-1"
            type="text"
            value={inputValue}
            placeholder="Ask me something..."
            onChange={(e) => setInputValue(e.target.value)}
          />
          <button type="submit" className="ml-1 py-2 px-4 rounded-md bg-green-500">
            <PaperAirplaneIcon className="w-6 h-6 text-white" />
          </button>
        </form>
    </div>
  );
};

The justify-content: flex-end; being applied from the justify-end class interferes with the scrollable calculation. Removing the class makes the content scrollable.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-col items-center h-screen justify-between">
  <div class="flex justify-center w-full">
    <h1 class="text-3xl font-bold my-5">Golfdommer</h1>
  </div>
  <div id="messages" class="flex flex-col w-full h-full overflow-y-auto">
    <UserMessage>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo vitae magna sit amet molestie. Phasellus dictum nec nulla nec dictum. Phasellus rhoncus libero id arcu tempus dapibus. Aenean ac facilisis lorem. Phasellus efficitur justo enim, a dapibus libero semper eget. Quisque id turpis vel risus aliquet condimentum et pellentesque elit. Morbi commodo orci augue. Aenean elit turpis, rhoncus ut neque non, pulvinar sagittis libero. Sed congue odio vitae orci condimentum, at cursus lacus feugiat. Donec accumsan enim vel leo cursus aliquam. Fusce eu tellus quam. Aliquam ut est nibh. Cras congue sit amet dui vel imperdiet.</UserMessage>
    <BotMessage>Quisque et magna pulvinar, eleifend justo in, luctus nunc. Suspendisse iaculis imperdiet velit non posuere. Sed interdum, turpis vitae ultrices aliquet, nibh nibh ultrices nulla, non sollicitudin augue risus ac leo. Aliquam at ante ipsum. Mauris porttitor eu urna eget rutrum. Proin efficitur suscipit lorem, eu volutpat ipsum rutrum convallis. Duis ultricies mi eros, vel mattis enim tempor placerat. Vivamus nec magna sed tellus tincidunt placerat quis id tellus. Mauris sed turpis in sapien gravida faucibus non non orci. Maecenas ac ante porta, auctor diam vehicula, tincidunt sem. Suspendisse potenti. Fusce finibus, augue at mollis sagittis, nulla elit cursus dui, eu mollis tortor est eget augue.</BotMessage>
    <UserMessage>Morbi venenatis nulla sit amet leo mattis, ut posuere est egestas. In suscipit, tortor nec fermentum molestie, odio turpis condimentum odio, tempor ultricies neque nibh lacinia urna. Nam tempus fermentum vehicula. Donec vulputate sem vel lorem molestie, hendrerit dapibus urna ornare. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis aliquam quis urna posuere accumsan. Suspendisse scelerisque enim enim, id tempus mi tempor sit amet. Suspendisse suscipit mauris odio, vitae tincidunt magna pretium vitae.</UserMessage>
    <BotMessage>Ut aliquam elit ac lacus finibus varius. Proin bibendum nisi id pretium condimentum. Integer blandit, nibh in congue porta, dolor purus condimentum augue, pellentesque mattis nunc mauris vitae leo. Sed lorem est, porta vel nulla a, viverra dapibus ante. Phasellus consequat commodo dui, non varius felis. Nulla viverra dictum pharetra. Aenean dapibus congue sem non facilisis. Ut eget bibendum massa. Donec porttitor sit amet odio non condimentum. Maecenas libero purus, auctor ut ullamcorper et, condimentum eu orci. In malesuada tempor quam sed porttitor. Cras convallis nisi at purus luctus, ornare tincidunt eros volutpat. Proin tempus magna molestie purus condimentum varius. Maecenas a massa quis ante bibendum accumsan et non elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent dictum cursus suscipit.</BotMessage>
  </div>
  <form class="flex flex-row w-full mb-5 mt-2">
    <textarea class="border-2 rounded-md p-3 w-full mr-1" type="text" placeholder="Ask me something..."></textarea>
    <button type="submit" class="ml-1 py-2 px-4 rounded-md bg-green-500">
            <PaperAirplaneIcon class="w-6 h-6 text-white">PaperAirplaneIcon</PaperAirplaneIcon>
          </button>
  </form>
</div>

<!-- end snippet -->