先にまとめ

  • flex-shrink: 0 を Flexbox の子要素に書く
  • 親要素は普通に display: flex と overflow: auto

ここまでのあらすじ

単純に overflow: auto しとけばスクロールするじゃろ～とやってみたら Flexbox の子要素が軒並みスクロール不要な大きさにまで縮んでしまった。そういえばそうだった。

過去に同じ問題に直面したときはたしか min-width なんか付けたんだけど今回やってるのは大きさがまちまちで決められないし、そもそも min-width もなんか違う感じあるしってんで調べたところ、flex-shrink というプロパティがあることを知った。

flex-shrink

子要素の縮小係数 (shrink factor) を指定します。0 以上の数値。初期値は 1 。

親要素（display: flex を書く方）じゃなくて子要素の方へ指定する点に注意。

デモ

おしまい

リファレンスちゃんと読むの大事だね。

他に flex-grow と flex-basis 、あと省略形の flex があります。MDN 読んでみて。

参考