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

user_18864552 0
Viewed 373

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;
}
css html javascript
1 Answers

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 class="acharb-outer">
  <div class="acharb-inner">
    <span>Quisque ut dolor gravida.</span>
  </div>
</div>

<div class="acharb-outer">
  <div class="acharb-inner">
    <span>Fabio vel iudice vincam, sunt in culpa qui officia.</span>
  </div>
</div>

<div class="acharb-outer">
  <div class="acharb-inner">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed.</span>
  </div>
</div>

user_9790520
Related