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.
<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
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.