Flex-grow & Flex-shrink calculations explained — Flexbox Series Part 2

Photo by Osman Köycü on Unsplash

In my previous story, I talked about how flex-grow adapts it’s content to the available space left by its container.

This time, I will go into the nitty-gritty of how it does such calculations with flew-grow and flex-shrink.

First, we’ll get our HTML setup.

<div class=”container">
  <div id=”item-1" class=”item”></div>
  <div id=”item-2" class=”item”></div>
  <div id=”item-3" class=”item”></div>
</div>

And then our CSS.

.container {
  background-color: lightblue;
  margin:  10px auto;
  display: flex;
  padding: 20px 0;
  width: 900px;
}
.item {
  box-sizing: border-box;
  width: 200px;
  height: 150px;
  background-color: lightcyan;
  border: 2px solid darkcyan;
}

This code basically creates a flex container that has a width of 900px.

And then 3 boxes inside this container of 200px wide and 150px high.

Here is an image of the result.

By default, the flex-grow property is set to 0.

This means that the total space occupied by the 3 boxes are a total of 600px (200px * 3).

Space occupied: 200px * 3 = 600px

The width of the container(900px) subtracted by the amount of space occupied by the 3 boxes(600px) leaves us a total of 300px of unoccupied space.

Unoccupied space: 900px - 600px = 300px

Note: Please be aware that the next examples will be using the 300px of unoccupied space. Which we’ll be using for the calculations.

Next, let’s see what happens when we start integrating the flex-grow property to each of our items.

.item {
  flex-grow: 1;
}

Here is our new image!

Let’s see what happened in this case.

The flex-grow property was set to 1 in all of the boxes.

Meaning that they must organize themselves in order to occupy the space left in the container.

As I mentioned in my first example the space left in the container was 300px.

So, what we must do is add the value of all the flew-grow properties in our container, which is 3 (1+ 1+ 1).

flex-grow-total: 1+ 1 + 1 = 3

We now have to divide the available space (300px) by the total of flex-grow (3), giving us a total of 100px.

space ratio: 300px / 3 = 100px

Now, let’s calculate the final width of one the boxes but since they all have flex-grow: 1, it will be the same for all 3.

We have to multiple the space ratio(100px) by the flex-grow value(1) and added to its width (200px), this gives us a total of 300px.

final width: 100px * 1 + 200px = 300px

Let’s move to another example to get the hand of this calculation.

Let’s add these changes to our CSS.

#item-2 {
 flex-grow: 2;
}
#item-3 {
 flex-grow: 3;
}

This changes the flex-grow value of the second box to 2 and the third box to 3.

Here is the end result.

We already know that the amount of unoccupied space is a total of 300px.

So we must now calculate how much of that space will be added to the width of each box.

The first step is to add the values of their flex-grow property.

flex-grow-total: 1 + 2 + 3 = 6

Then we calculate the space ratio

space-ratio: 300px / 6 = 50px

Then we calculate the final width of each box

box-1: 50px * 1 + 200px = 250px
box-2: 50px * 2 + 200px = 300px
box-3: 50px * 3 + 200px = 350px

Thus, making these new values the width of its corresponding box.

But what happens when the width of the container is smaller than the size of its contents.

Let’s add this code to the end of our CSS

.container {
  width: 300px;
}
#item-2 {
  flex-shrink: 2;
}

Amazing enough, our boxes adjust to the size of its container.

The calculations are pretty similar to the ones made for the flex-grow property but with a negative value.

We know that the new width of the container is now of 300px and that the total width of the boxes was 600px.

If we subtract these 2 numbers we get a difference of -300px that will be subtracted from each box, depending on its flex-shrink value.

By default, all of the flex-items (the boxes inside the container), get a flex-shrink value of 1.

Now let’s add the total of the flex-shrink values.

flex-shrink-total: 1 + 2 + 1 = 4

Then, as we did with the flex-grow properties we have to calculate the ratio.

space-ratio: -300px / 4 = -75px

And finally, we calculate the total width of all the boxes.

box-1: -75px * 1 + 200px = 125px
box-2: -75px * 2 + 200px = 50px
box-3: -75px * 3 + 200px = 125px

Last but not least, for those of you wondering what happens when we set the value of flex-shrink to 0 in all of our boxes.

This is what happens…

That’s all for today!

I hope you enjoy this post.

See you around.

Here is a link to part 3 of this series!

https://medium.com/@ali.rivera.echegaray/when-does-flex-wrap-kick-in-flexbox-series-part-3-303ecdbeb765