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

user_16517930 0
Viewed 571

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?

angular css
2 Answers

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

user_155760100

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

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

user_174934310
Related