javascript - How to set width to "fit-content" with additional width? - Stack Overflow

admin管理员组

文章数量:1289582

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;
}

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;
}

• javascript
• html
• css

Share Improve this question Follow edited Apr 19, 2022 at 13:53 acharb asked Apr 19, 2022 at 13:46 acharbacharb 15322 silver badges1010 bronze badges 3

• 1 Can you give a minimal example ? – Cédric Commented Apr 19, 2022 at 13:49
• 1 Could you not create a chide element to provide the extra width, then set the parent to fit-content? – Alicia Sykes Commented Apr 19, 2022 at 13:51
• 1 Not possible. You're looking for calc() but you can't bine intrinsic and extrinsic units. As in, calc(fit-content + 50px) isn't valid CSS. Some kind of padding or margin is probably your best bet. – Brandon Hill Commented Apr 19, 2022 at 13:56

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

It's not possible to use calc() to bine 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>

本文标签： javascriptHow to set width to quotfitcontentquot with additional widthStack Overflow