Flexulator
GROW
/ * =
SHRINK
( * ) / = * =
GROW
/ * =
SHRINK
( * ) / = * =
GROW
/ * =
SHRINK
( * ) / = * =
Flexbox Formula
Grow
Each Flex Item has Flex: 1 1 100px
Step 1
Container - Total Flex Basis
= Remaining Space
2000px - 300px = 1700px
Step 2
[Element Grow / Total Grow]
* Remaining Space
= Element Flex Space
[ 1 / 3 ] * 1700px = 561px
Step 3
Element Flex Space + Element Flex Basis
= Final Size
561px + 100px = 661px Final Size
Shrink
Each Flex Item has Flex: 1 1 1000px
Step 1
Container - Total Flex Basis
= Remaining Space
2000px - 3000px = -1000px
Step 2
[Item Shrink * Item Basis]
/ [Total Flex Basis]
= [Value] * Remaining Space = Shrink Amount
[ 1 * 1000 ] / (3000) = .333 * 1000 = 333.33px
Step 3
Element Flex Basis - Shrink Amount
= Final Size
1000px - 333.33px = 667px