Element not inheriting parent element's height

      <div className='min-h-screen flex flex-col'>
        <Navbar />
        <div className='bg-red-100 border-solid border-red-400 flex-grow'>
          <Routes>
            <Route
              path='/'
              element={<Main />}
            ></Route>
            <Route
              path='/login'
              element={!user.name ? <Login /> : <Navigate to='/homepage' />}
            ></Route>
            <Route
              path='/register'
              element={!user.name ? <Register /> : <Navigate to='/homepage' />}
            ></Route>
            <Route
              path='/homepage'
              element={!user.name ? <Navigate to='/login' /> : <Homepage />}
            ></Route>
            {/* Protected routes */}
            {routes}
          </Routes>
        </div>
      </div>

const Main = () => {
  return (
    <div class='bg-red-50 h-full flex flex-col items-center justify-center'>
      <div id='label' className='text-xl mb-4'>Experiments</div>
      <Link
        to='/login'
        id='mainpage-link'
      >
        Login
      </Link>
      <Link
        to='/register'
        id='mainpage-link'
      >
        Register
      </Link>
    </div>
  );
};