Kevin Powell - CommunityKP-C
Kevin Powell - Community•2y ago•
41 replies
tejveer

Element not inheriting parent element's height

I have the following code in App.js:
      <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>

And the following Main component:
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>
  );
};

Theoretically speaking, since main has height: 100%, it should take up its parent's height (the parent with flex-grow), but in my case it doesn't. See the linked screenshot (I changed the colors to make it more visible; the purple and purple border is the parent div; the light red is the Main component's elements).

Why is the Main component not inheriting the parent component's height? My theory is that perhaps it has something to do with Routes interfering, but I'm at a loss.
image.png
Was this page helpful?