javascript - How to shrink a from a max-height to a min-height over the size decrease of the viewport width?

Question

If I have a body element and I decrease screen size, it is a 1:1 ratio.
If I have an body tag at width 50%. its a 1:1 ratio. Every pixel decrease of the viewport directly effects the width of element.

If I have 2 Elements side by side. I want to have the first element (.left) start at a width of 400px, at a screen width of 1300px, but increase a total of 100px over the course of the screen increase to 1920px.
The second element (.right) will fill the rest of the space and decrease at the according rate of the screen +/- the current width of .left
.right
1300px -> 1920px
400px -> 500px
.left
width:100%
I know this doesnt work but this is the code I've got so far.

.full{
background-color: lightblue;
width:100%;
height:50px;
}
.half{
width:50%;
height:50px;
background-color:grey;
}
#flex{
display:flex;
}
.right{
max-width:500px;
min-width:400px;
height:50px;
background-color:lightgreen;
width:70%;
}
.left{
height:50px;
background-color:lightpink;
width:30%;
}

<div class="full"></div>
<div class="half"></div>
<div id="flex">
    <div class="left"></div>
    <div class="right"></div>
</div>

question from:https://stackoverflow.com/questions/65623375/how-to-shrink-a-from-a-max-height-to-a-min-height-over-the-size-decrease-of-the

Answer 1

I'm assuming the wording in the question is what is required, i.e. the left element is to have a min value of 400px, a max value of 500px and is to increase in size from the min starting at body width 1300px and stopping at 1920px.

left therefore needs to be set to have a min-width: 400px and max-width: 500px

We need to calculate what the width will be to increase by 100px between the given start and end body width values. The formula for this is:

s + (i / d) * (a - b)

where s = starting width of left element (400) i = increase in left width (100) d = difference between start and end body widths (1620) a = actual body width now (100%) b = starting body width (1300)

The right element is to take up the remaining space so needs to be given flex: auto;

In this snippet the various dimensions have been set using CSS variables so as to make it easier to change them.

.full{
  background-color: lightblue;
  width: 100%;
  height: 50px;
}
.half{
  width: 50%;
  height: 50px;
  background-color:grey;
}
#flex{
  display: flex;
}
.right{
  height: 50px;
  background-color: lightgreen;
  flex: auto;
}
.left{
  height:50px;
  background-color:lightpink;

  /* SET THESE 4 VARIABLES TO WHAT YOU WANT */
  --startb: 1300; /* width of the body after which left starts to get bigger */
  --endb: 1920; /* width of the body after which left stops getting bigger */
  --startleft: 400; /* the start (hence minimum) width of the left element */
  --incw: 100; /* the increase in the left's width when have reached the end body width */
  
  /* we calculate some interim values just to make it a bit easier to see what's happening */
  --startbw: calc(var(--startb) * 1px);
  --endbw: calc(var(--endb) * 1px);
  --incb: calc(var(--endb) - var(--startb));
  --startw: calc(var(--startleft) * 1px);
  
  width: calc(var(--startw) + calc(calc(var(--incw) / var(--incb)) * calc(100% - var(--startbw))));
  min-width: var(--startw);
  max-width: calc(var(--startw) + calc(var(--incw) * 1px));
}

<div class="full"></div>
<div class="half"></div>
<div id="flex">
    <div class="left"></div>
    <div class="right"></div>
</div>