How To Shrink A From A Max-height To A Min-height Over The Size Decrease Of The Viewport Width?

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 t

Solution 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));
}

<divclass="full"></div><divclass="half"></div><divid="flex"><divclass="left"></div><divclass="right"></div></div>