0

So this is my layout:

<div style="display: flex; min-height:100vh">
  <div>Sidebar</div>
  <div style="flex-grow: 2">All my views</div> // Container of the main content of my app
</div>

The result is this:

enter image description here

The sidebar is stuck to the left and the main content is taking most of the space, perfect.

Inside the container of my app, let's say I wan't a login component:

<div style="display: flex; min-height:100vh">
  <div>Sidebar</div>
  <div style="flex-grow: 2">
    <div style="display: flex; justify-content: center; align-items: center; height:100%">
      My login component
    </div>
  </div> 
</div>

I center it with Flexbox and by setting a height: 100%. Since the parent container is itself stretching the height fixed by its parent, it works.

Now the problem:

In mobile, the sidebar is on the top of the page. Therefore, I'm adding to the root container a flex-direction: column to it, like that:

<div style="display: flex; flex-direction: column; min-height:100vh">
  <div>Sidebar</div>
  <div style="flex-grow: 2">All my views</div> // Container of the main content of my app
</div>

Result:

enter image description here

See what's wrong? Why is not centered like it was on desktop?

That's because the login div, the one nested into the content container that has a flex-grow: 2 is not filling up the entire height anymore:

enter image description here

Even though the container is still stretching and the div has a height: 100% ?? Why this behavior??

Well after HOURS of trying to understand what was going on, I tried using height: 100vh instead of min-height: 100vh on the root container and it freaking works.

enter image description here

Why the hell does it work now? min-height and height have the same effect, they set specific height for the root container. I tried both and the result on my desktop view is the same, it's only on mobile viewport, when my root container has a flex-direction: column, that the login component doesn't fill up the height anymore.

Btw I don't want to use height: 100vh! What if the content is higher than 100vh? I don't want an ugly overflow, that's why I always use min-height. I'm stuck, how can I fix that?

  • So you need the left area to fill the height of the screen? – Chris P Nov 06 '21 at 02:26
  • I don't investigate a lot for your problem, but you can try something like position:absolute and z-index property. – Chris P Nov 06 '21 at 02:27
  • Avoiding this kind of problem is exactly the sort of reason most of us use 'vh' units, so this does seem like really weird behavior. Perhaps explicitly setting the flex-basis on the nested login component would allow you to avoid the use of height: 100vh; on the parent? https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis – diopside Nov 06 '21 at 04:53
  • Does this answer your question? [CSS Height working but min-height doesn't work](https://stackoverflow.com/questions/17969022/css-height-working-but-min-height-doesnt-work) – disinfor Nov 06 '21 at 13:11

0 Answers0