flex-basis: 50px を指定しているのに、ブラウザ幅を縮めると box1 と box2 の幅が 50px 以下になるのはなぜですか?

flex-basis はフレックスアイテムの幅の初期値(基準値)を指定するためです。
2022年4月28日
ユーザー

#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;
}

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

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

よろしくお願いします。

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

プレミアムプランとは?

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