flex-shrinkについて

flexの挙動について理解できないので、解説をして欲しいです。
下記のHTML/CSSをブラウザで確認するとaが69.23px、bが230.77pxというwidthの大きさになりました。
私の理解としては
aがwidth: 30%なので90px、bがwidth: 100%なので300px、
合わせて390px、親のコンテナサイズが300pxなのでネガティブ領域が90px
これをflex-shrinkの値の比率で(デフォルト値 1)で分け合うのでa,bともに-45px
そのため、aが45pxでbが255pxになると思いました。
おそらく考え方が間違っているのはわかっているのですが、どのように考えれば最初の数値になるのか教えて欲しいです。
よろしくお願いします。

html
1<div class="container">
2  <div class="a">
3    a
4  </div>
5  <div class="b">
6    b
7  </div>
8</div>
9

css
1.container {
2  display: flex;
3  width: 300px;
4}
5
6.a {
7  width: 30%;
8  height: 48px;
9  background-color: red;
10  flex-shrink: 1;
11}
12
13.b {
14  flex-shrink: 1;
15  width: 100%;
16  background-color: blue;
17}
18