TailwindCSS + Reactjs: How to make inner div scroll on overflow?

I have the below React app layout, where I want the div with id="messages" in the Chat.js component to be scrollable in the y-direction when the messages overflow the div. The contents of the page should always fit the height of the device screen so that only the inner div becomes scrollable when needed.

I read that I need to apply some fixed height in order to make this happen, but I want the height to always be 100% of the screen, and I can’t make it work by doing that. What’s the workaround?

My App.js:

import Chat from "./components/Chat";

function App() {
  return (
    <main className="font-display bg-slate-50">
      <div className="mx-96">
        <Chat />
      </div>
    </main>
  );
}

export default App;

My Chat.js component:

const Chat = () => {

...

return (
    <div className="flex flex-col items-center w-full h-full justify-between">
      <h1 className="text-3xl font-bold my-5">Golfdommer</h1>
      <div className="w-full">
        <div id="messages" className="flex flex-col h-full overflow-y-auto"> // <-----
          {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"
        >
          <input
            className="border-2 rounded-md p-2 w-full"
            type="text"
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
          />
          <button type="submit">
            <PaperAirplaneIcon className="w-6 h-6 text-green-500" />
          </button>
        </form>
      </div>
    </div>
  );
};

export default Chat;