flex-grow 1 1 (the default). child-1 wants 100, child-2 wants 150, we have 150 left to 400. So divide this 150 equally, 75 each. Thus adds 75 (175 = 100 + 75) to child-1 and 75 to child-2 (225 = 150 + 75)
100
150
flex-grow 1 1. Analogous, adds 50 to each.
150
150
flex-grow 1 1 flex-basis: 150px. child-1 wants to have 150, just like child-2. So add 50 each.
100
150
flex-grow 1 1 flex-basis 100. flex-basis is still used as the value that counts even if it is smaller than the minimal content size.
150
150
flex-grow 1 2. child-1 wants 100, child-2 wants 200. We have 100 left to 400. Because of flex-grow 2, child-2 will grow 2x more than child-1, so child-1 grows 33 from 100 to 133 and child-2 grows 67 from 200 to 267
100
200
flex-grow 1 2
100
250
flex-grow 0 1. child-1 simply cannot grow, so child-2 takes up all remaining space.
50
50
flex-grow 0 0. How much is 300 divided by 0? Doesn't matter, if neither can grow we go below the min.
50
50
No more space left, all fits perfectly.
100
300
flex-basis 200. child-1 wants to be 200, child-2 also 200, there is enough space, so let child-1 be 200.
100
200
flex-basis 200. child-1 wants to be 200, but child-2 needs 250, so we can only give child-1 50
100
250
flex-basis 200 flex-shrink 0. child-1 refuses to shrink due to shrink 0, so we have no choice but to overflow the container.
100
250
flex-basis 300 300. Both want 300px. There isn't enough space, so we shrink both by an equal amount, from 300 to 150.
50
150
flex-basis 300 300 flex-shrink 2 1. This time, child-1 will shrink 2x more than child-2. We need to shrink from 600 to 400, child-2 shrinks 200/3 = 66 from 300 to 233, and child-1 shrinks 2*66 = 133 from 300 to 167
50
150
minimal content size doesn't fit, nothing we can do about it