Randy Hall Randy Hall - 5 months ago 17
CSS Question

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

Answer

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

Comments