＃9 で同様の質問がありましたが、いまいち分からないため質問させてください。
＃1 の CSS を
例えば、

.container{
  display: flex;
}

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

}

.box1{
  background: orange;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 50px;
}

.box2{
  background: skyblue;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 50px;
}

.box3{
  background: tomato;
}

と書き換えた場合、ブラウザの幅を小さくすると box1 と box2 の幅は 50px 以下になります。
これはなぜでしょうか？

最初、flex-basis: 0; と flex-basis: auto の違いが分からず、いろいろ試して
shrink したときに、flex-basis: 0; がコンテンツ幅まで縮んだので、納得したのですが、
では flex-basis: 50px; を指定した時は幅 50px まで縮小したら縮小が止まるかと思ったらそうではなかったので、疑問に思いました。

よろしくお願いします。