什麼是 flex-shrink ？
定義了 flex item 在 flex 容器內空間不足時，接受一個數值，用於計算縮小的比例，預設值為 1。

<div class="container">
    <div class="block pink"></div>
    <div class="block red"></div>
    <div class="block blue"></div>
    <div class="block green"></div>
</div>

.container {
  display: flex;
  width: 600px;
}

.block {
  height: 100px;
}
/* 寬度 -（不足寬度 * 權重） */
/* 寬度 -（不足寬度 * (flex-shrink * flex-item 寬度 / 總權重)） */

.pink {
  background-color: pink;
  flex-shrink: 0;
  width: 100px;
  /* 100 - (((100 + 150 + 200 + 300) - 600) * (100 * 0 / (100 * 0 + 150 * 1 + 200 * 2 + 300 * 3))))  */
  /* 100 */
}

.red {
  background-color: red;
  width: 150px;
  /* 150 - (((100 + 150 + 200 + 300) - 600) * (150 * 1 / (100 * 0 + 150 * 1 + 200 * 2 + 300 * 3))))  */
  /* 134.48 */
}

.blue {
  background-color: blue;
  flex-shrink: 2;
  width: 200px;
  /* 200 - (((100 + 150 + 200 + 400) - 600) * (200 * 2 / (100 * 0 + 150 * 1 + 200 * 2 + 300 * 3))))  */
  /* 158.63 */
}

.green {
  background-color: green;
  flex-shrink: 3;
  width: 300px;
  /* 300 - (((100 + 150 + 200 + 400) - 600) * (300 * 3 / (100 * 0 + 150 * 1 + 200 * 2 + 300 * 3))))  */
  /* 206.89 */
}

參考資料

详解 flex-grow 与 flex-shrink