如何为元素设置fit-content宽度并额外增加宽度？

嘿，这个需求我刚好处理过！直接写width: fit-content + 50px是行不通的，CSS不支持这种直接的表达式语法，但我们有完美的解决方案，而且完全符合你“只用width属性”的要求：

方法一：使用CSS calc()函数 #

这是最直接、最推荐的方式，calc()允许我们在CSS中进行简单的数值计算，刚好能把fit-content和固定像素值结合起来：

.element {
  width: calc(fit-content + 50px);
}

⚠️ 重要提醒：运算符+的前后必须加空格，不然CSS会识别失败，这是calc()的硬性语法要求哦。

这个方法在现代浏览器里都能正常工作，fit-content本身已经被Chrome、Firefox、Safari、Edge等主流浏览器支持，完全能满足大部分场景的需求。

备选方案（兼容旧浏览器） #

如果你的项目需要兼容一些不支持fit-content的老旧浏览器（比如IE），可以用min-content替代，或者结合inline-block特性（效果和fit-content略有差异）：

.element {
  display: inline-block;
  width: calc(min-content + 50px);
}

不过现在老旧浏览器的市场占比已经极低，优先推荐第一种方法就好。

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