Flexbox Tester

Understand how to calculate the width of flex items.

Flex item 1
Flex item 2
Flex item 3

Working it out

1. Find the space remaining:

The flex container is: 0px

The initial size of all the flex items is: (0px + 0px + 0px) = 0px

So the space remaining is: 0px - 0px = 0px

That's a positive number, so we will be using flex-grow to work out how to distribute the remaining space between the flex items.

2. Find the size of 1 flex-grow value:

The total of all flex-grow values is: (0 + 0 + 0) = 0

So 1 flex grow is: 0px/0 = 0px

2. Find the size of each flex item:

Flex item 1 should be: (0 × 0px) + 0px = 0px

Flex item 2 should be: (0 × 0px) + 0px = 0px

Flex item 3 should be: (0 × 0px) + 0px = 0px

That's a negative number, meaning our items don't fit in the flex container. We will be using the flex-shrink factor determine how much each flex item will shrink.

2. Find the flex shrink factor for each item:

The total of all scaled flex shrink factors: ( (0 × 0) + (0 × 0) + (0 × 0) ) = 0

The flex-shrink factor for item 1 is: (0 × 0) / 0 = 0

The flex-shrink factor for item 2 is: (0 × 0) / 0 = 0

The flex-shrink factor for item 3 is: (0 × 0) / 0 = 0

3. Find the size of each flex item:

Flex item 1 should be: (0 × 0px) + 0px = 0px

Flex item 2 should be: (0 × 0px) + 0px = 0px

Flex item 3 should be: (0 × 0px) + 0px = 0px

NOTE: If these any of calculations result in a negative width, that item will be clamped at 0 and the calculations will be done again with remaining items and new remaining space.

In this case there is no remaining space, the basis will be the exact size of the elements and therefore there is nothing more to work out.

Apologies, but there is nothing more delightful than anoying the internet with Comic Sans.