why does my disappear when I add a height to it

I am using remix and trying to make a profile page similar to rarible here is my code:

export default function UserRoute() {
    return (
        <div>
            <Navbar />
            <main className="mx-8 my-8">
                <Outlet />
            </main>
            <Footer />
        </div>
    );
}

export default function User() {
    return (
        <div>
            <div className="relative group w-full h-75 bg-custom-lightgrey rounded-lg">
                <button className="hidden absolute top-4 right-4 px-4 py-2 transition duration-300 group-hover:block rounded-lg w-fit h-10 ml-2 flex items-center bg-custom-black text-white text-sm font-semibold font-inter">
                    <span>Edit cover</span>
                </button>
                <div className="relative h-32 w-32 bg-black rounded-full"></div>
            </div>
        </div>
    );
}

The user is displayed in the <Outlet /> however I am trying to make a rectangle with a grey background but when I add a specific height to it and inspect it the height is not displayed.
Ive tried adding a h-screen and a min-h-screen to the parent div on the UserRoute but none of this has worked. Any help would be amazing on how to do this to make it similiar to rarible! Thanks!