flex-shrinkを使ってコードを試しに書いていた時に気付いた点を確認させてください。

クラスbox1～box5までの幅100pxのflex itemを5つ用意して、以下のCSSを記述しました。

.container {
  width: 440px;
  display: flex;
  flex-direction: row;
 }

.box1{
  flex-basis: 200px;
  flex-shrink: 2;
}
.box2{flex-shrink: 4;}
.box4{flex-shrink: 0;}

アイテム全体の幅が100*4+200=600px、コンテナの幅が440pxなので、超過している幅は160px。
これをbox1から順に2:4:1:0:1に割り振るので、各アイテムの幅は160px/20px/80px/100px/80pxとなるかと思いましたが、実際には136px/36px/84px/100px/84pxとなりました。

各アイテムの要素幅に対して係数がかかっている、即ち「box1にはflex-shrinkは2だけれど、幅が他の要素の2倍あるので、box1の割り振りの基準値は22=4となり、超過幅が22=4:4:1:0:1に割り振られた」という風に捉えたのですが、正しいでしょうか。

また、flex-growを使って逆のパターンを試したのですが、flex-growではアイテムの要素幅に関係なく、flex-growで設定された値のみを基準に割り振られているようです。こちらも理解があっているかどうか、またshrinkとgrowでどうして違いがあるのか、分かれば教えて頂きたいです。

よろしくお願いいたします。