How to achieve something like width : max-content + 5rem in css?

I have a dropdown component in which I have expandable items. I want the width to be max-content plus 5 rem. so when let's say the width of the content is 6 rem, I want the actual width to be 11 rem. When the content becomes 10rem, I want the dropdown width to be 15rem.

I want to achieve something like width : max-content + 5 rem; How do I do this?

Maybe this can help

I'm not sure if this is what you wanted, but technically, you can do this by using calc() and var() functions in CSS3. Firstly, you need to set the variable in root section (you can name it what you want), and then use it with var(). The calc() is used, to calculate, as its name says. It can be used like: calc(100px + 100px) and so on...

Here's the sample:

HTML

<div>
  Some text... /* This is optional */
</div>

CSS

:root {
  --max-width: 10em;
}

div {
  width: calc(var(--max-width) + 5em);
  border: 1px solid blue;
}

Here is a jsfiddle example