look at this simple example:
#main {
width: 300px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
#main div:nth-of-type(1) {
flex-grow: 1;
flex-basis: 50%;
}
#main div:nth-of-type(2) {
flex-grow: 1;
flex-basis: 0;
}
#main div:nth-of-type(3) {
flex-grow: 1;
flex-basis: 0;
}
<h1>The flex-grow Property</h1>
<div id="main">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:khaki;"></div>
</div>
The result will be that first div will have 200px width, 2nd and 3rd div will have 50px and 50px width respectively.
From where does this 200px come from? If I'm telling the first div to grow 50% of its size, it should be 150px (because it had 100px initially without flex-basis). If I'm telling it to grow 50% of the parent's size, then it should be 250px. How does it compute to get 200px width?
Example Fiddle: https://jsfiddle.net/dtavh3p2/