テキストコンテンツの最小幅は（英語で、他になにも設定しなければ）単語です。
こちらをお読みになると理解が進むかもしれません。
テキストの分割と折り返し - CSS: カスケーディングスタイルシート | MDN
補足しておきますと、フレックスアイテムは最小コンテンツサイズより小さくならない仕様です。
（ただし、max-widthなどによって最小サイズが変化する場合があります）
この辺りはなかなかややこしいので深入りしないことをおすすめしますが、transferred size suggestionはときどきトラップのように意外なサイズ計算をしますので、記憶の隅に置いておいてもいいかもしれません。
4.5. Automatic Minimum Size of Flex Items | CSS Flexible Box Layout Module Level 1
すべてflex-shrink: 1なので同じ割合で縮小しているだけです。
当方の環境ではこうでした。
26.53/65.68≒0.404
142.75/353.28≒0.404
329.68/816≒0.404
なお、ここで表示されている「コンテンツサイズ」は最大コンテンツサイズです。テキストコンテンツの場合は折り返しをしないで表示可能なサイズのことです。
max-content - CSS: カスケーディングスタイルシート | MDN
0 コメント