結論
親要素にdisplay: flexを指定してはみ出し部分をスクロールさせたいのにoverflow: scroll;が効かない時や、子要素が縮んでしまった時の解決方法です。
解決方法：縮んでほしくない要素にflex-shrink: 0;を指定する
解説
display: flexは要素を横並びにしたい時にとても便利なプロパティです。
親要素にこのプロパティを指定すると、子要素が横並びになります。
このflexboxを使うと、親要素のサイズに対して子要素のサイズが大きくて入りきらない時に、子要素が縮んでしまうことがあります。
例えばこんな感じです。🔽
See the Pen Untitled by kabechiyo_shunkaaizawa (@kabechiyo) on CodePen.
1つ目のタブリストは、はみ出した部分がスクロールするようにoverflow-x: scroll;の指定をしていますが、効かずに中身が潰れてしまっています。
2つ目のアイコンとテキストが横並びになったUIは、アイコン部分にwidth: 40px; height: 40px;を指定しているのですが、横方向が潰れてしまっています。
こんな時は、潰れてほしくない子要素にflex-shrink: 0;を指定すると、要素が潰れなくなります！
See the Pen Untitled by kabechiyo_shunkaaizawa (@kabechiyo) on CodePen.
flex-shrinkとは、フレックスアイテムの縮小係数を指定するプロパティで、デフォルトは1になっています。
詳しくはflex-shrink - CSS: カスケーディングスタイルシート | MDNをご覧ください！
Ref
フレックスボックスの基本概念 - CSS: カスケーディングスタイルシート | MDN
flex-shrink - CSS: カスケーディングスタイルシート | MDN