`min()` いくつかの候補から小さい方を使う

重要度4 / 5

意味

候補の中で、計算した結果が小さい方を使いたいときに使います。width: min(100%, 40rem) は、親より広くならず、40rem も超えません。はみ出しを防ぐ幅の指定でよく使います。

max() が「大きい方」、clamp() が「最小と最大のあいだ」です。同じ場所で役割を分けて使います。

HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。

HTML

<div class="card">親の幅と 40rem のうち、小さい方になります。</div>

CSS

.card {
  width: min(100%, 40rem);
  background: #efeef8;
  padding: 0.75rem 1rem;
}

プレビュー

出典: MDN Web Docs（`@mdn/browser-compat-data`）