Full height using flex-direction: column

Question

I want my c1 to be fully stretched, but I wonder why when I apply flex:1 it doesn't fill up the space.

.wrap {
  display:flex;
  flex-direction: column;
}

.c1 {
  background: red;
  flex: 1;
}

.c2 {
  background: blue;
}

<div class='wrap'>
  <div class='c1'>
    <div>child 1</div>
    <div>more content</div>
   </div>
  <div class='c2'>child 2</div>
</div>

You need to set a height on the parent – Paulie_D Nov 04 '21 at 15:23 — Paulie_D, Nov 04 '21 at 15:23

score 1 · Accepted Answer · answered Nov 04 '21 at 15:24

1

In your wrap class you have to add the height.

.wrap {
  display:flex;
  flex-direction: column;
  height: 100vh;
}

.c1 {
  background: red;
  flex: 1;  
}

.c2 {
  background: blue;
}

<div class='wrap'>
  <div class='c1'>
    <div>child 1</div>
    <div>more content</div>
   </div>
  <div class='c2'>child 2</div>
</div>

answered Nov 04 '21 at 15:24

Maik Lowrey

height 100vh is not what I want, it create scroll bar – alice_morgan Nov 04 '21 at 15:27
"I want my c1 to be fully stretched" -- you have to define what that is. Is it 100vh? Is it 100 px? The above answer is correct, just maybe a different number than 100vh. – gwalshington Nov 04 '21 at 15:28
@alice_morgan you feel free to change the hight or can you perhaps explain in more detail what exactly you expect? – Maik Lowrey Nov 04 '21 at 15:31
1

I got it, just have to use box-sizing to not have a scroll bar – alice_morgan Nov 04 '21 at 15:43

1 Answers1