CSS min() 関数の使い方
今更ながら CSS の関数 min() を使ってみたのでそのメモを残しておきます。似たような CSS 関数で他に max() や clamp() などがありますが、今回は min() 関数だけ触れます。（他のはまだ実践で使ってないので）
min() とは
min() CSS 関数を使うことでその複数の値の中の最小値を選んで使用してくれます。
例えば親要素の 10% もしくは 100px を子要素の最大幅にしたい時はこんな感じで書けます。
max-width: min(10%, 100px);
min(10%, 100px) を使うことで、親要素の幅が 1000px より大きい時は 100px、小さい時は 10% を使用します。
（例えば親要素の幅が 800px の場合、10% = 80px となるので、80px の方が選ばれる）
これを min() なしで実現したいのであれば、多分以下のような従来の書き方でもいけると思います。
width: 10%;
max-width: 100px;
ただ、僕が実際に使った時はもう少し複雑でこのやり方だとダメなパターンでした。具体例はちょっとパッとは出せないのですが、Flexbox の flex プロパティを使っていろいろと幅の指定している場合などはこのやり方ではうまくいかない場合があります。その場合以前は JS で要素の幅とったりとか考えるだけでも面倒くさいことをやらないといけませんでしたが、便利な時代になったものです。
従来の書き方でも行けるとしても、min() で書けば一行で書けますのでこっちの方がイケてますよね。個人的にはできるだけイケてるコードを書きたいのです。
MDN の min() のページ により詳しく説明が書いてありますので興味のある方はチェックしてみてください。
ちなみに max() はこれの反対で、複数の値の中から最大値を選んで使用するという感じです。ちょっとこっちはまだ実践で使う用途が今のとこないのですが、積極的に使っていきたいです。やっぱり知識だけ持っていても実際に使わないと体得できませんからね。
対応ブラウザ
min() や max() などはすべての主要ブラウザでサポートされています。（2023/01 現在）なので気にすることなく積極的に使っていきましょう！
参考
デモ
説明だけだとわかりづらいと思うのでデモも作りました。正直これくらいのやつだったら Flexbox を使う必要ないのですが、上で書いたようにもう少し複雑な Flexbox になった時とかにこの min() が相性良さそうだったのであえて使ってます。
Discussion