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>>Solution :
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>