full height using flex-direction: column

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>

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>

Dev solutions