How to set width to "fit-content" with additional width?-CodePudding

I want to know how I can set the width of an element to fit-content, but I also want to add some more width. I cannot use padding, I only want to use width. Maybe something like width: fit-content 50px or something like that?

EDIT: Example:

.element{
   width: fit-content   50px;
}

CodePudding user response：

It's not possible to use calc() to combine intrinsic and extrinsic units. The only option here is to use padding. Since you said you cannot apply padding to your element, you would need to create a child element to carry these styles.

Here's an example (I've added background to each to visualize)

.acharb-outer {
  width: fit-content;
  margin: 1rem 0;
  background: #ffd166;
}

.acharb-inner {
  padding: 0 2rem;
  background: #ef476f;
}

span {
  background: #06d6a0;
}

<div >
  <div >
    <span>Quisque ut dolor gravida.</span>
  </div>
</div>

<div >
  <div >
    <span>Fabio vel iudice vincam, sunt in culpa qui officia.</span>
  </div>
</div>

<div >
  <div >
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed.</span>
  </div>
</div>