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?

CodePudding user response：

Use the calc function. width: calc(max-content 5rem);

Note you must use spaces between the operator. Learn more here

CodePudding user response：

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