CSS中calc(max-content + 2rem)设置height无效如何解决

calc() 仅支持带单位的长度值（如px、rem、百分比、视口单位等）、纯数值类型参与四则运算，max-content是CSS预定义的尺寸关键字，不属于可计算的数值类型，因此你写的height: calc(max-content + 2rem)属于无效CSS属性，会被浏览器直接忽略不生效。
顺带提一句，普通文档流中的块级元素（比如你用的<p>标签）默认height: auto的渲染效果本来就和height: max-content完全一致，会自动按内容的最大高度撑开，没必要特意声明max-content。

方案1：内边距实现（优先选择，全浏览器兼容） #

这是最简单、性能最好的写法，不需要依赖任何特殊属性。要在内容高度基础上叠加2rem额外空间，直接给元素设置对应值的上下内边距即可，配合box-sizing: border-box就能保证元素总高度刚好等于「内容自然高度+自定义额外高度」。
如果需要2rem额外高度平均分布在内容上下方，CSS写法如下：

p {
  /* 不需要额外设置height，默认auto值即可适配内容高度 */
  padding-block: 1rem; /* 上下内边距各1rem，累计额外高度刚好2rem */
  box-sizing: border-box;
}

如果需要2rem额外高度全部加在内容底部：

p {
  padding-bottom: 2rem;
  box-sizing: border-box;
}

原有HTML结构不需要做任何修改：

<p>Lorem Ipsum is simply dummy text of the printing and typesetting <br> industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer</p>

方案2：伪元素撑高（适合不能使用内边距的特殊场景） #

如果你的业务场景里内边距区域需要留作他用（比如放置绝对定位的装饰元素、预留交互热区），可以用空伪元素追加额外高度，不会占用内边距位置：

p {
  /* 仅flex/grid子项、绝对定位元素、浮动元素这类auto高度不遵循max-content的场景需要加这行，普通块级元素可省略 */
  height: max-content;
}
/* 额外高度加在内容底部 */
p::after {
  content: "";
  display: block;
  height: 2rem;
}

如果需要额外高度均分在内容上下，同时添加::before和::after伪元素，各设置1rem高度即可。

• 截至2024年，所有主流浏览器均不支持在calc()中直接使用max-content/min-content/fit-content这类尺寸关键字参与运算，相关写法没有兼容性保障，不要在生产环境使用。
• 如果元素是flex/grid子项、浮动元素、绝对定位元素，默认height: auto的计算逻辑不等于max-content，可以先给元素加min-height: max-content再搭配上述padding/伪元素方案，不需要硬写固定height。

内容的提问来源于stack exchange，提问作者Fettah_Aud