Content width + some amount of px with calc()

Question

I know i can do calc(100% + 15px), but is there way to do calc("content width" + 15px)?

fit-content and auto didn't work, which kinda makes sense.

I have unknown number of items that i want just to take width they need (inline-block) + some amount of px for justify-content: space-between;

If this can't be done with calc, is there an alternative?

(I'm using scss if that changes anything)

Gore

If they are inline block can't you just add padding? – Weekend

Can you share your use case, I am pretty sure there is an easy way to what you want – Ferretti

Yeah, how about using a CS table and border-spacing. jsfiddle.net/MrLister/s91254cg/3 – Debouchment

Yeah, i totally overlooked :not(:last-child) selector and padding-right and narrowed it to usage of calc() and flexbox. Your comment shifted me to the right direction. But i still wonder if it is possible to do such thing with calc(), without js and accessing the dom. – Gore

Good question. Any solution for this? – Dday

Answer 1

Use padding. The content+padding => determines size without using % percentage for width.

In my scenario, a button added a '>' using pseudo ::after, and was positioned 18px from the right edige.

Legion

Any code sample ? – Limitative

Answer 2

I also found myself in this situation, unfortunately not having found a solution I used a small JS function that assigns the value

width: calc ($(element).width() + 10px);

Unfortunately, rather than calculating the measure via javascript when loading the page I can not help you.

Andrey

Answer 3

Have you try the following ?

width: max-content;

It works on my case. I have a <div> whose children somehow wrapped. Somehow fit-content nor auto did not work. But width: max-content; works.

Limitative