Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS calc() for inverse width isn't working

I have an element that I want to increase in width as its parent decreases in width

The equation should look something like:

width:calc(150 + 500 / 100%);

But at least in Chrome it says the property is invalid whenever I try to divide by percent width.

Is this possible? (Alternatives to calc() are acceptable)

EDIT I added spaces (didn't realize about that). Tried it with a variety of units, no luck yet.

Fiddle

<div style="width:100%;position:relative;">
    <div style="width:calc(150px + (500 / 100%));position:absolute;top:0;left:0;">This one should get bigger as the page gets smaller</div>
</div>

Thought process:

Fixed width (150px) plus 500 divided by the current parent width.

So if the parent is 500px:

150 + 500/500 -> 150 + 1 = 151

Parent is 100px

150 + 500/100 -> 150 + 5 = 155

Parent is 20px

150 + 500/20 -> 150 + 100 = 250

like image 754
Randy Hall Avatar asked Dec 25 '22 04:12

Randy Hall


1 Answers

Solution is so simple it's mind-boggling. Move the 500px into the first part and subtract the width.

width:calc(650px - 100%);

Gets wider as its parent gets narrower.

Updated fiddle

like image 126
Randy Hall Avatar answered Dec 26 '22 19:12

Randy Hall