Why aren't divs full height in a vertical flexbox?

Question

Consider the following code snippet:

<style>
.v {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    height: 100%;
}
.e {
    height: 100px;
    width: 200px;
}
.q {
    overflow: hidden;
    height: 500px;
}
</style>
<div class="q">
  <div class="v">
      <div class="e">hello1</div>
      <div class="e">hello2</div>
      <div class="e">hello1</div>
      <div class="e">hello1</div>
      <div class="e">hello2</div>
      <div class="e">hello1</div>
      <div class="e">hello2</div>
      <div class="e">hello1</div>
      <div class="e">hello2</div>
      <div class="e">hello1</div>
      <div class="e">hello2</div>
      <div class="e">hello1</div>
      <div class="e">hello2</div>
      <div class="e">hello1</div>
      <div class="e">hello2</div>
  </div>
<div>

The divs are not full height, despite having height: 100px. How would I make the divs be full height?

Note, this snippet looks different locally, but the issue is the same (the divs are not full height).

To vertically stack `div`s you won't need a `display: flex;` as the default `display: block;` will do just that. Should you want to use `flex` and `fiex-direction: column`, however, you'd need to set the `flex-basis: 100px` with `flex-shrink: 0;`. — Bumhan Yu, Mar 11 '22 at 06:12

score 2 · Accepted Answer · answered Mar 11 '22 at 05:59

2

flex-direction: column will prevent the divs from taking up full space You can use min-height instead of height. so that the div e will have min height all time.

.e {
    min-height: 100px;
    width: 200px;
}

answered Mar 11 '22 at 05:59

Lijo Chacko

351
1
5

score 1 · Answer 2 · answered Mar 11 '22 at 06:05

You can change this behavior, by assigng your wrapped container a min-width.

    .v {
        display: flex;
        flex-direction: column;
        overflow-y: scroll;
        min-height: 50%; /* this line ! for example 50% or 100% etc. */
    }

<style>
.v {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    min-height: 100%; 
}
.e {
    height: 100px;
    width: 200px;
}
.q {
    overflow: hidden;
    height: 500px;
}
</style>
<div class="q">
  <div class="v">
      <div class="e">hello1</div>
      <div class="e">hello2</div>
      <div class="e">hello1</div>
      <div class="e">hello1</div>
      <div class="e">hello2</div>
      <div class="e">hello1</div>
      <div class="e">hello2</div>
      <div class="e">hello1</div>
      <div class="e">hello2</div>
      <div class="e">hello1</div>
      <div class="e">hello2</div>
      <div class="e">hello1</div>
      <div class="e">hello2</div>
      <div class="e">hello1</div>
      <div class="e">hello2</div>
  </div>
<div>

Seven · Answer 3 · 2022-04-11T16:16:22.287

0

You used flex-direction: column, so the dimension is changed. That means, you have to set the width to 100% or 100px (depends on what you really want) and also set min-width.

edited Apr 11 '22 at 16:16

answered Mar 11 '22 at 05:47

Seven

330
2
15

Wow, removing the flex-box worked. Could you explain why `flex-direction: column` is preventing the divs from taking up full space? – Foobar Mar 11 '22 at 05:50
And what specific thing should I set to `100px`? (thanks by the way, I was stuck on this for a while!) – Foobar Mar 11 '22 at 05:51
Actually, if you just want a stacking div, you don't need to set the div as flex-box. Also, you can learn more about flexbox here https://css-tricks.com/snippets/css/a-guide-to-flexbox/ . Hope this helps – Seven Mar 11 '22 at 05:58

score 0 · Answer 4 · answered Mar 11 '22 at 06:35

Your problem is you set 500px for .q and height: 100% for .v that will make flexbox .v use it as an anchor point for spreading children's element sizes (this is the behavior of flexbox). If you try to add more div for your testing, they won't ever and never go out of your fixed height 500px

This is how they communicate:

V: I have 100% height, where could I get a height reference for 100%?

P: You can take mine, because I have 500px height

E: Why you don't take mine, V?

V: Nah, I trust my parent elements

If you remove height: 500px in .q, it will work as you expected

.v {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    height: 100%;
}
.e {
    height: 100px;
    width: 200px;
}
.q {
    overflow: auto; /*Modified it as auto or you also can remove it*/
}

Another possible fix, you can remove height: 100% in .v as it won't take .q as a height reference again.

.v {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}
.e {
    height: 100px;
    width: 200px;
}
.q {
    overflow: auto;
    height: 500px;
}

Another side note, flexbox by default is using flex-direction: row;, and usually, we use flex-direction: column; for mobile responsive purposes. In your case, if it's only for desktop, you can remove flexbox, by default, it will render row-based div

.v {
    overflow-y: scroll;
    height: 100%;
}
.e {
    height: 100px;
    width: 200px;
}
.q {
    overflow: hidden;
    height: 500px;
}

Why aren't divs full height in a vertical flexbox?

4 Answers4