I want a dashboard with a top and side bar and then the content in the middle. I want the content to be scrollable but I want it to fill the available height. The only issue is that when I try to fill the height it goes past the screen making the whole window scrollable and then is no longer scrollable itself. I have been reading its something to do with flex box but cannot tell. Im using React with typescript and Tailwindcss

App.tsx

import "./App.css";
import { Route, Routes, BrowserRouter } from "react-router-dom";
import Chat from "./components/Chat";
import ChatList from "./components/ChatList/ChatList";
import Topbar from "./components/Navigation/TopBar";
import Bottombar from "./components/Navigation/BottomBar";

function App() {

    return (
            <BrowserRouter>
            <div className="flex h-screen flex-col">
            <Topbar />
                <div className="grid grid-cols-8">
                    <div className="col-span-1"></div>
                    <div className="col-span-7">
                    <Routes>
                        <Route path="/chat/:id" element={<Chat />}></Route>
                        <Route path="/list" element={<ChatList />}></Route>
                    </Routes>
                    </div>
                </div>
            <Bottombar />
                </div>
            </BrowserRouter>
    );
}

export default App;

Chat.tsx

import MessagePane from "./MessagePane/MessagePane";
import "../App.css";
import { useParams } from "react-router-dom";

interface ChatProps {
  id: number;
}

export default function Chat() {
  const { id } = useParams<{ id?: string }>();
    const chatId = id ? parseInt(id, 10) : undefined;

    if (chatId === undefined) {
        return <div>Invalid chat ID</div>; // Display an error message or handle the case where id is undefined
    }

    return (
    <div className="flex-grow overflow-hidden bg-red-400">
      <MessagePane id={chatId} />
    
    
    </div>
    );
}

MessagePane.tsx

import { useEffect, useRef, useState } from "react";
import { Message } from "../../interfaces/message.interface";
import ChatBubble from "./ChatBubble";
import "../../App.css";

interface MessagePaneProps {
    id: number;
}

export default function MessagePane({ id }: MessagePaneProps) {
    const [messages, setMessages] = useState<Message[]>([]);
    const [renderedMessages, setRenderedMessages] = useState<Message[]>([]);
    const [loadCount, setLoadCount] = useState<number>(10); // Number of messages to load at a time
    const chatContainerRef = useRef<HTMLDivElement>(null);
    const topMessageIdRef = useRef<number | null>(null);

    useEffect(() => {
        const fetchMessages = async () => {
            if (messages.length === 0) {
                try {
                    const response = await fetch(
                        `http://localhost:3000/messages/${id}`
                    );
                    if (response.ok) {
                        const data = await response.json();
                        setMessages(data); // Ensure messages are in the correct order
                    }
                } catch (error) {
                    console.error("Error fetching messages", error);
                }
            }
        };

        fetchMessages();
    }, [id]);

    useEffect(() => {
        if (messages.length > 0) {
            setRenderedMessages(messages.slice(-loadCount));
            setTimeout(() => {
                if (chatContainerRef.current) {
                    chatContainerRef.current.scrollTop =
                        chatContainerRef.current.scrollHeight;
                }
            }, 0);
        }
    }, [messages]);

    const loadMoreMessages = () => {
        if (chatContainerRef.current) {
            const scrollTopBefore = chatContainerRef.current.scrollTop;
            const scrollHeightBefore = chatContainerRef.current.scrollHeight;

            const newRenderCount = Math.min(
                renderedMessages.length + loadCount,
                messages.length
            );
            setRenderedMessages(messages.slice(-newRenderCount));

            requestAnimationFrame(() => {
                if (chatContainerRef.current) {
                    const scrollHeightAfter =
                        chatContainerRef.current.scrollHeight;
                    chatContainerRef.current.scrollTop =
                        scrollHeightAfter -
                        scrollHeightBefore +
                        scrollTopBefore;
                }
            });
        }
    };

    const handleScroll = () => {
        if (chatContainerRef.current) {
            const { scrollTop } = chatContainerRef.current;

            if (scrollTop === 0) {
                // Get the ROWID of the top message
                const topMessageElement = chatContainerRef.current.querySelector(
                    ".chat-container > div:first-child"
                );
                if (topMessageElement) {
                    const topMessageId = parseInt(
                        topMessageElement.getAttribute("data-rowid") || ""
                    );
                    topMessageIdRef.current = topMessageId;
                }

                loadMoreMessages();
            }
        }
    };

    useEffect(() => {
        const chatContainer = chatContainerRef.current;
        if (chatContainer) {
            chatContainer.addEventListener("scroll", handleScroll);
        }

        return () => {
            if (chatContainer) {
                chatContainer.removeEventListener("scroll", handleScroll);
            }
        };
    }, [renderedMessages]);

    // Scroll to the top message when new messages are loaded
    useEffect(() => {
        if (topMessageIdRef.current !== null) {
            const topMessageElement = document.querySelector(
                `#message-${topMessageIdRef.current}`
            ) as HTMLElement;
            if (topMessageElement && chatContainerRef.current) {
                chatContainerRef.current.scrollTop =
                    topMessageElement.offsetTop - chatContainerRef.current.offsetTop;
            }
        }
    }, [renderedMessages]);

    return (
        <div
            className="chat-container flex-grow overflow-y-auto"
            ref={chatContainerRef}
        >
            {renderedMessages.map((message: Message, index: number) => (
                <div
                    key={index}
                    id={`message-${message.ROWID}`}
                    data-rowid={message.ROWID} // Store the ROWID as data attribute
                >
                    <p>{message.ROWID}</p>
                    <ChatBubble sender={message.is_from_me} >
                        {message.text}
                    </ChatBubble>
                </div>
            ))}
        </div>
    );
}