flex-boxで画像や要素が小さく潰れるのを防ぐ

flexboxレイアウトで画像やボタンなどの要素が極端に小さく潰れてしまうのを防ぐテクニックです。min-widthやmin-height、flex-shrink: 0;を活用します。

プレビュー

ボタン

テキストが長い場合でも画像やボタンが潰れません。