幅が異なるフレックスアイテムに 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足りないから、box1100px box250px box350px
になるかと思ったのですが、box1,2,3共に→66.672の幅になっていました。
そもそも私の認識が間違っていたのでしょうか?
        
どのような計算したのか理解できないので説明宜しくお願いします。

この回答を見るにはプレミアムプランへの登録が必要です

プレミアムプランとは?

このレッスンの質問と回答(7)