calc-size()

概要

通常の calc() では使用できない height や width のキーワード値（auto、fit-content、min-content、max-content）を計算式に含められます。例えば calc-size(fit-content, size / 2) のようにキーワードサイズの半分を指定できます。height: auto へのアニメーションなど、従来CSSだけでは不可能だった表現を実現する革新的な関数です。

対応ブラウザ

基本構文

.panel {
  height: calc-size(auto, size);
  transition: height 0.3s;
}
.panel.collapsed {
  height: 0;
}

実務での使いどころ

• height: auto へのスムーズなアニメーション

  calc-size(auto) を使って、従来不可能だった自動高さへのCSSトランジションを実現し、アコーディオンUIなどを簡潔に実装できます。

注意点

アクセシビリティ

• アコーディオンなどの開閉アニメーションに使用する場合、prefers-reduced-motion を考慮し、モーション設定に応じてアニメーションを無効化してください。

参考リンク

• MDN Web Docs — calc-size()