Property: flex-grow
Default: flex-grow: 0 (remaining space not filled)
1
flex-grow: 0
2
flex-grow: 0
3
flex-grow: 0
4
flex-grow: 0
3 allowed to take remaining space (flex-grow: 1)
1
flex-grow: 0
2
flex-grow: 0
3
flex-grow: 1
4
flex-grow: 0
Remaining space distributed equally (all have same flex-grow)
1
flex-grow: 1
2
flex-grow: 1
3
flex-grow: 1
4
flex-grow: 1
3 gets 2/5 (40%) of remaining space (does not mean that 3 will be twice as wide)
1
flex-grow: 1
2
flex-grow: 1
3
flex-grow: 2
4
flex-grow: 1
3 gets 4/7 of remaining space
1
flex-grow: 1
2
flex-grow: 1
3
flex-grow: 4
4
flex-grow: 1