`display: flex;`で要素が潰れてしまうのを回避する

困ったこと

display: flex;で横並びになっているボタンが3つあります。

この状態からウインドウ幅を小さくすると

ボタンが潰れないように表示したいです。

解決策1

min-widthを設定する

ボタン1つが200px, 左右余白が10pxずつとすると、
潰れない最小の幅は 200 * 3 + 10 * 2 で 620pxとなります。

これを min-width に設定すると

ウインドウ幅を縮めてもボタンが潰れずに表示できました。

解決策2

ボタン要素にflex-shrink: 0;を設定する

潰さないように表示できました

flex-shrinkとは

フレックスアイテムの縮小係数を設定するプロパティ

デフォルトで flex は子要素がコンテナに収まるように自動で縮小して調整してくれます

自動で縮小しないためにflex-shrink: 0;を指定します。