Flex positionning in CSS - reactjs

Question

I'm creating a React Native application and I would like to use flex to structure the positionning of my elements on the screen. Considering that we have the following screen: the red zone got a flex-grow value of 1, the yellow zone 2 and the green zone 3. They all have a parent with a display: flex and flex-grow: 1. (This is React Native so default flex-direction is column).
My question is the following: What if there is no green zone? How could I tell flex to take 1/6 of the parent for the red zone, 2/6 for the yellow zone and leave the rest empty ?

Answer 1

I was able to achieve the layout you described by applying flex-grow: 0 and flex-shrink: 0 to the flex items. By setting the flex-basis to the appropriate percentages the layout holds up with or without the presence of the third div.
.wrapper {
display: flex;
flex-flow: column nowrap;
height: 100vh;
}
.one {
flex: 0 0 16.666%; /* dont grow, dont shrink, starting basis */
background: red;
}
.two {
flex: 0 0 33.333%; /* dont grow, dont shrink, starting basis */
background: yellow;
}
.three {
flex: 0 0 50%; /* dont grow, dont shrink, starting basis */
background: green;
}
<div class="wrapper">
<div class="one">ONE</div>
<div class="two">TWO</div>
<div class="three">THREE</div>
</div>
This time I omit the third div and we get the same layout:
.wrapper {
display: flex;
flex-flow: column nowrap;
height: 100vh;
}
.one {
flex: 0 0 16.666%; /* dont grow, dont shrink, starting basis */
background: red;
}
.two {
flex: 0 0 33.333%; /* dont grow, dont shrink, starting basis */
background: yellow;
}
.three {
flex: 0 0 50%; /* dont grow, dont shrink, starting basis */
background: green;
}
<div class="wrapper">
<div class="one">ONE</div>
<div class="two">TWO</div>
</div>

Answer 2

Théo, do you want to do it only with flex or can you hear another suggestion?
This is a perfect example to use grid.
Fiddle: https://jsfiddle.net/h17tezLd/
<div class="container">
<div class="zone1"></div>
<div class="zone2"></div>
<div class="zone3"></div>
</div>
<style>
.container {
width: 150px;
height: 300px;
background: grey;
display: grid;
grid-template: 1fr 2fr 3fr / 100%;
}
.zone1 { background: red; }
.zone2 { background: blue; }
.zone3 { background: green; }
</style>