css variables calc var min, nested calculation based on viewport width and height

Question

For a web app I want to calculate some elements width and height width pure css, based on vw (viewport width) and vh (viewport height), depending of which one is smaller.

My approach is

div#top_panel > ul > li {
    /*...*/

    --w: calc(vw / 8);
    --h: calc(vh / 8);
    width: min(var(--w), var(--h));
    height: min(var(--w), var(--h));

    /*...*/
}

I tried different combinations... no result at all. Can somebody take me out of here ?

Answer 1

Thanks for the contribution of sanriot. I did not know the vmin until now.

But the reason of getting nothing to work was just a typo. The viewport height is not vh but 100vh :-)

So the corrected code works

div#top_panel > ul > li {
    /*...*/

    --w: calc(100vw / 8);
    --h: calc(100vh / 8);
    width: min(var(--w), var(--h));
    height: min(var(--w), var(--h));

    /*...*/
}

But 1+ for sanriot for the vmin.

EDIT / APPENDIX / SOLUTION:

Meanwhile I got it working. Two or more horizontal scrollable lists of numbers, where each list is scrollable separately, and it shows numbers and scrolls them groupwise depending on devices viewport size... here visible on iPad and iPhone

I assigned a variable in general css rule for the list elements, --grid: 10vmin; and used this variable later in media queries like

@media only screen and (min-width: 600px) {
    span.btn11 {
        width: calc(calc(2 * var(--grid)) - 8px);
        height: calc(calc(2 * var(--grid)) - 8px);
    }
    span.btn21 {
        width: calc(calc(2 * var(--grid)) - 8px);
        height: calc(calc(4 * var(--grid)) - 8px);
    }
}

where span.btn11 is a square button and span.btn21 is double height, and 8px is the sum of margins.

Answer 2

Maybe you can achieve that by use vmin unit.

vmin unit^ref

Equal to the smaller of vw or vh.

.box {
  --size: 100vmin;
  width: calc(var(--size) / 8);
  height: calc(var(--size) / 8);
  background: #faf;
}

<div class="box"></div>