How to calculate the flex shrink when the width is large than flex container?

Question

The MDN states the following:

The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink.

I went to the W3C to find out how to calculate the specifics. Here, I have used the following source code as an example.

* {
  margin: 0;
}

.p {
  display: flex;
  margin: 0 auto;
  width: 100px;
  height: 50vh;
  border: 4px solid red;
}

.c {
  width: 250%;
  border: 4px solid green;
}

<div class="p">
  <div class="c"></div>
</div>

Here, according to the W3C, the flex shrink factor is used for the flex item .c.

c. Distribute free space proportional to the flex factors.

• If the remaining free space is zero

  Do nothing.

• If using the flex shrink factor

  For every unfrozen item on the line, multiply its flex shrink factor by its inner flex base size, and note this as its scaled flex shrink factor. Find the ratio of the item’s scaled flex shrink factor to the sum of the scaled flex shrink factors of all unfrozen items on the line. Set the item’s target main size to its flex base size minus a fraction of the absolute value of the remaining free space proportional to the ratio.

Note this may result in a negative inner main size; it will be corrected in the next step.

• Otherwise

  Do nothing.

---

If the above source code is used to calculate along this specification, it will look like the following, and item's target main size will be negative.

This calculation is somewhere wrong because actually browser extends the flex item to the entire flex container.

1. scaled flex shrink factor:

   [flex shrink factor] * [flex base size] => 1 * 250% => 250px

2. sum of the scaled flex shrink factors: 1

3. item’s target main size:

   [flex base size] - ([remaining free space] * ([scaled flex shrink factor] / [sum of the scaled flex shrink factors]))

   => 250% - (100px * (250% / 1)) => 250px - (100px * 250px) => -24750px (expected result: 100px)

---

Question

1. What is wrong with this calculation?
2. Also, how do I get the width of the entire flex container as a result of calculating the width of the flex item?

Answer 1

You are wrong calculating the sum of the scaled flex shrink factors which is 250px and not 1. It's not the sum of the flex shrink factor but the scaled flex-shrink factor and this will logically give you a ratio of 1 since it's the only element inside its parent. Also the remaining free space is 150px not 100px since your element is overflowing by 150px which is the negative free space

250px - (150px * (250px/250px) ==> 100px

Also, how do I get the width of the entire flex container as a result of calculating the width of the flex item?

There is nothing to get here since you already specified an explicit width of 100px

---

Let's take another example with two elements to better understand the formula:

* {
  margin: 0;
}

.p {
  display: flex;
  margin: 10px auto;
  width: 100px;
  height: 50vh;
}

.c {
  width: 250%;
  flex-shrink:2;
  outline: 4px solid green;
}

.d {
  width: 300%;
  flex-shrink:3;
  outline: 4px solid green;
}

<div class="p">
  <div class="c"></div>
  <div class="d"></div>
</div>

Here we have a free negative space of (300% + 250%) - 100px = 450px

The scaled factor for .c is 2*250% = 500px

The scaled factor for .d is 3*300% = 900px

The sum of the scaled factors is 1400px

The final size of .c will be 250px - (450px * 500px/1400px) = 89.29px

The final size of .d will be 300px - (450px * 900px/1400px) = 10.71px

We can clearly see that 89.29px + 10.71px = 100px