Flex box doesn't stretch - html

Question

I'm currently doing some stuff with Flex Box and I'd like my flex box to stretch but I can't do it. Here is my codepen : https://codepen.io/chevalierv/pen/bGdBKyg
.FlexContainer {
height: 65vh;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
align-content: stretch;
justify-content: center;
padding: 1em;
background-color: red;
}
.SecondChildContainer {
align-self: flex-end;
order: 2;
flex: 1;
flex-basis: 100%;
background-color: green;
}
.FirstChildContainer {
order: 1;
flex-grow: 5;
align-self: stretch;
background-color: blue;
}
<div class="FlexContainer">
<div class="FirstChildContainer">
a
</div>
<div class="SecondChildContainer">
a
</div>
</div>

Answer 1

I have cleaned your css a little bit and made it work. See the jsfiddle below:
https://jsfiddle.net/gqptemhu/
Basically, what your flex container needs is
.FlexContainer {
height: 65vh;
display: flex;
flex-direction: column;
}
so it knows to stack the items vertically.
And you use
flex: 0 1;
flex: 1 0;
On the items inside of the flex container, to tell which item will grow, and which one will shrink. The first number corresponds to flex-grow, and the second to flex-shrink. They are both relative numbers which tell which percentage of space the items will grow/shrink to.
You can read more about flexbox and how to use it on the link below:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/