Increasing the height of div dynamically if page width increases-CodePudding

In my CSS I would like to:

Have the div never descend below a height (min-height)
Have the div never exceed a certain height (max-height)
If I increase the page width I want the div height to dynamically increase (or decrease if I'm decreasing the page width).

something like:

div{
  min-height: 10vw;
  max-height: 30vw;
  height: calc(??);
}

Is this achievable?

CodePudding user response：

You cant use Js? if you use js its possible with window.innerWidth and assign it to element. Forexample:

let windowWidth = window.innerWidth;
document.getElementById("myDynamicHeight").style.height = `${windowWidth}px`;