幅が異なるフレックスアイテムに flex-shrink の幅を設定したところ、想定とは違う幅になってしまったのはなぜですか？

各フレックスアイテムの幅が違う場合には flex-shrink の計算方法がもう少し複雑になります。

2021年8月31日

ユーザー

例えばの例なのですが、、

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

.box {
  width: 100px;
  height: 100px;
}  

.box1 {
  background: orange;
  flex-basis: 200px;
  flex-shrink: 2;
}

.box2 {
  background: skyblue;
  flex-shrink: 1;
}

.box3 {
  background: tomato;
  flex-shrink: 1;
}

の場合、私の認識では200px足りないから、box1→100px box2→50px box3→50px
になるかと思ったのですが、box1,2,3共に→66.672の幅になっていました。
そもそも私の認識が間違っていたのでしょうか？
　　　　　　　　
どのような計算したのか理解できないので説明宜しくお願いします。