CSS calc-size() 为 max-content 添加固定内边距的实现方式

给内容宽度不固定的标签、徽章或卡片增加一段稳定空间时，calc(max-content + 2rem) 并不是正确写法。更合适的表达是 calc-size(max-content, size + 2rem)：第一个参数保留固有尺寸语义，第二个参数里的 size 代表前面的基准值。这样既能保留 max-content 的布局特性，又能在它的基础上做计算。

规范参考：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/calc-size

先把 max-content 当作计算基准

max-content 不是一个已经算好的像素值，它表达的是内容在不主动换行等约束下所需的固有尺寸。calc-size() 的第一参数就是计算基准，第二参数中的 size 才是对这个基准的引用。因此，下面的写法适合给一组内容宽度不同的徽章统一追加左右空间：

.badge {
  /* 先让内容决定固有宽度，再追加固定空间 */
  inline-size: calc-size(max-content, size + 2rem);
  /* 保留文本换行和视觉边界，避免内容溢出容器 */
  padding-inline: 0.75rem;
  overflow-wrap: anywhere;
}

.badge--compact {
  /* 固定宽度用于不支持 calc-size() 的回退路径 */
  inline-size: 12rem;
}

这里的固定空间是计算结果的一部分，padding-inline 仍然是盒模型内边距。若把同一段空间同时写进计算和 padding，最终宽度会叠加；实际项目应先决定“额外空间”由尺寸计算承担，还是由盒模型承担。

用 fallback 与 @supports 保留旧浏览器布局

calc-size() 目前仍不是所有常用浏览器都支持。实用写法是先给出一个读者可以接受的基础值，再在特性查询中覆盖同一属性。旧环境至少能看到内容，支持环境再得到精确的固有尺寸计算。

.chip-list {
  /* 基础布局：不认识 calc-size() 时也能保持可读 */
  inline-size: max-content;
  max-inline-size: 100%;
  overflow: hidden;
}

@supports (inline-size: calc-size(max-content, size + 2rem)) {
  .chip-list {
    /* 支持环境才追加固有尺寸计算 */
    inline-size: calc-size(max-content, size + 2rem);
  }
}

不要只用 JavaScript 测浏览器名称。特性查询检查的是当前渲染引擎是否接受这条声明，失败时原来的 inline-size: max-content 仍然存在。若容器可能被窄屏裁切，max-inline-size: 100% 和溢出策略仍要保留，它们不会因为计算函数生效就自动消失。

把固定空间计算与尺寸插值分开

这两个特性经常同时出现，但解决的不是同一个问题。interpolate-size: allow-keywords 更适合让一个长度和一个固有尺寸关键词之间产生过渡；calc-size() 适合对某一个固有尺寸继续做计算。只为了让 width: 80px 过渡到 max-content，没有必要把值包进 calc-size()。

此外，interpolate-size 是可继承属性，放在过大的祖先节点上可能影响子树中其他尺寸过渡。若只想改变一个组件，优先把范围收窄到组件根节点；这比全局打开后再逐项排除更容易维护。

检查百分比解析与部署支持边界

calc-size() 中的百分比不能简单理解成“基于 size 的百分比”。当包含块尺寸不确定时，计算表达式里的百分比可能按 0 处理；而把百分比放在 calc-size 的基准位置，语义又不同。需要比例缩放固有尺寸时，优先使用无量纲乘法，例如 size * 1.5，并给不支持环境准备明确 fallback。

.notice {
  /* 普通环境先给出可控的最小宽度 */
  inline-size: 16rem;
  max-inline-size: 100%;
}

@supports (inline-size: calc-size(max-content, size * 1.5)) {
  .notice {
    /* 用无量纲系数缩放固有宽度，避免误读为容器百分比 */
    inline-size: calc-size(max-content, size * 1.5);
    /* 限制极端长内容，避免增强布局反过来撑破页面 */
    max-inline-size: 100%;
  }
}

上线前可以按这张清单排查：函数第一参数是否只有一个固有尺寸基准；第二参数是否使用了有效的 size 表达式；fallback 是否位于增强声明之前；组件是否同时设置了溢出和最大尺寸；需要的是计算还是单纯的插值。每项都通过，再把它当作渐进增强发布。

延伸问答

calc-size() 能直接写进普通 calc() 吗？

不能把 max-content 当成普通长度塞进 calc()。应使用 calc-size() 明确指出固有尺寸基准。

只想让 auto 高度平滑变化，必须使用 calc-size() 吗？

不一定。若没有额外计算，优先考虑 interpolate-size: allow-keywords；只有需要对固有尺寸做运算时才使用 calc-size()。

为什么写了 calc-size() 仍然出现内容溢出？

它只负责计算尺寸，不会替你决定窄容器的收缩策略。继续设置 max-inline-size、换行和 overflow，并检查 padding 是否被重复计算。

参考：MDN calc-size()、CSS Values and Units Module Level 5、Chrome Developers intrinsic size 说明。