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>

      <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>
  );
};

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.

20 Replies

b1mind•3mo ago

you can only have a % of something that has a set strict* height. So the parent would have to have a set height:

tejveer•3mo ago

Ah, I didn't know that. Thank you. So what would you suggest I do in this scenario? Is there no way to make it expand to the entire height of parent?

b1mind•3mo ago

https://codepen.io/b1mind/pen/PojdyQz use Grid 😉 but here is both a flex and grid solution

Brent Morton

CodePen

Pushed footers Flex / Grid

...

b1mind•3mo ago

I can use 100% because I pass it down from html{} (which is the only element it will get value % from document view or w/e) I use svh in this example as progressive enhancement (meaning if browser supports it it will use it) but know that viewport units will breakout of parents.

tejveer•3mo ago

html, body, #root {
  height: 100%;
}

html, body, #root {
  height: 100%;
}

Adding the above to my index.css does nothing unfortunately. Perhaps there's more I'm supposed to do that I didn't understand in your example, but I believe I'm using flexbox as you are.

b1mind•3mo ago

for #root I would use display: contents; and just ignore it without a demo of your issue there is nothing I can do to solve it. Also again I think the grid solution is 100x the better solution I would use it over the flex 100% of the time. I just have both examples to show how. auto 1fr is gold

tejveer•3mo ago

I see, thanks. Unfortunately I can't run a demo right now since this is a full-stack app and I haven't hosted it anywhere yet.. I'll try to do what I can with iti

b1mind•3mo ago

you can just use Stackblitz fyi https://stackblitz.com/ also you can abstract the CSS issue away, sometimes this is best anyway minimal demos are better than full application xD

tejveer•3mo ago

I was just trying some random stuff and I decided to change the App's first div with min-h-screen to an h-full and it suddenly worked (with the html, body set as you'd set it). Very weird behavior with heights. Just new to all this CSS stuff and height is confusing me very much. Are you able to diagnose why min-h-screen (aka min-height: 100vh) doesn't work in this context but h-full (height: 100%) does? Guess I'll need to go more in-depth into heights tomorrow morning At least I got the issue resolved for now

Kevin Powell•3mo ago

min-height isn't a height... it's "at least this size, but it could be bigger", where as "height: 100%" is a "this is how big it is"

b1mind•3mo ago

If you are just learning CSS I would start by learning CSS and stop using Tailwind so you can understand what is happening

tejveer•3mo ago

Well, I know how to design a website given some basic structure with CSS, I was trying to learn more in depth right now. This website was actually being made to store all the various learning projects I store for frontend and backend. I have zero idea about responsiveness and more in-depth stuff about heights. I used to set heights manually on nearly all divs until I was recently told that's not what you're supposed to be doing.

b1mind•3mo ago

correct best height is no height, let your content determine height when ever you can. min-height is handy for this reason

tejveer•3mo ago

I don't think tailwind is adding any overhead honestly, it's literally just normal css except much shorter and much more convenient to write, to me at least. I plan on going through Kevin's responsiveness course after I refactor the website a bit

b1mind•3mo ago

just another abstraction like the fact min-h-screen uses vh 🤢

tejveer•3mo ago

Is that supposed to be bad?

b1mind•3mo ago

You basically trusting them to do things right when they do things how they want not per say an actual working group or spec like how they proposed to make * { min-width: 0;} 🤣 just yea you really gotta know what things they add Kevin made me a video just so I don't have to rant anymore lol

b1mind•3mo ago

https://youtu.be/ru3U8MHbFFI?si=Wr6DCXGOmLkKMgig

Kevin Powell

YouTube

Use these instead of vh

Looking to step up your CSS game? 👉 https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=viewportunits I have a bunch of courses, including several free ones. I see people use vh a lot, and then complain that it doesn’t work the way they thought it would, so in this one, I explore a few other options that we have,...

tejveer•3mo ago

Thanks, will watch

b1mind•3mo ago

https://youtu.be/veEqYQlfNx8?si=_DRTAbhKvezGXnkh

Kevin Powell

YouTube

The problems with viewport units

Conquering Responsive Layouts (free course): https://courses.kevinpowell.co/conquering-responsive-layouts Join the Discord: https://kevinpowell.co/discord Viewport units often feel like this cheat code that makes things so much easier when you first discover them, but they actually are problematic for a number of reasons, from creating horizon...

Gaming

Programming

Element not inheriting parent element's height