Setting a length (height or width) for one element minus the variable length of another, i.e. calc(x - y), where y is unknown

Question

I know we can use calc when lengths are defined:

flex-basis: calc(33.33% - 60px);
left: calc(50% - 25px);
height: calc(100em/5);

But what i

Answer 1

Updated

As I commented earlier, and besides flex, this is also solvable using display: table and here is a fiddle demo I made showing that.

If a fixed top also were required for the vertical demo, here is an update of my original display:table version: fiddle demo

Sometimes I haven't been able (or didn't want) to use either flex nor tables, and I have, on and off, looked into making use of css calc() and css attr().

Both come short though, as calc() can only use +-*/ and attr() can only return a string value, which can't be computed by calc().

My suggestion, using plain javascript, is based on that these 2 methods, at some point, might be extended so we can make better use of them.

This is how I would like see them work;

width: calc(100% - attr(this.style.left))

but as they don't, and I can't add it to my css either as it wouldn't validate properly (might even break the parsing, who knows) I added a variant as an attribute on the element instead, with some quirks to make it easier to compute.

And in this case (the 2 demos) it looks like this:

//height
...

//width 
...

Together with below script, which by no means is fully developed/tested on all property combinations, it does adjust the div's size.

In short, when runned, it take the attribute, split it into an array, take the first item value as from which property to read, the second to which property to set and the third to which the read value gets inserted/replaced and assigned to the property to be set (hmmm, still working on a better way to express this, but hopefully the script is clear enough with whats going on).

Here is a fiddle showing both the height and width demo, integrated, making use of the same script.

function calcattr() {
    var els = document.querySelectorAll('[data-calcattr]');
    for (i = 0; i < els.length; i++) {
        var what = els[i].getAttribute('data-calcattr');
        if (what) {
            what = what.split(',');
            var rect = els[i].getBoundingClientRect();
            var parentrect = els[i].parentNode.getBoundingClientRect();
            var brd = window.getComputedStyle(els[i].parentNode,null).getPropertyValue('border-' + what[0] + '-width');            
            what[2] = what[2].replace(what[0],parseInt(rect[what[0]]-parentrect[what[0]]) - parseInt(brd));
            els[i].setAttribute("style", what[1] + ":" + what[2]);
        }
    }
}