Can you divide by xvw in css?

I want my div box to grow vertically as the window shrinks horizontally.

Then I found out about the calc() function in css and tried the following:

.fancyBox {
    height: calc(1000 / 1vw);
}

so in theory, if the window is 1920px wide then the height should be ~52px and if the window is 1024px wide then the height should be ~98px

However, the height attribute gets ignored and doesn’t show up in the browsers inspector (I’m testing with firefox). Should this work? Am I mucking up the syntax? Any other way to do it(in just CSS that is)?


Source: css

Leave a Reply