`max()` いくつかの候補から大きい方を使う

重要度3 / 5

意味

候補の中で、計算した結果が大きい方を使いたいときに使います。width: max(16rem, 40%) は、40% が 16rem より狭いときは 16rem を使います。狭すぎる列を防ぐときに使います。

小さい方で止めたいときは min()、範囲に収めたいときは clamp() です。

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

HTML

<div class="card">40% と 16rem のうち、大きい方になります。</div>

CSS

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

プレビュー

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