Stała szerokość jednego elementu flex i zmienna drugiego aż do 0

Witam,
mam dwa elementy obok siebie o szerokościach po 50vw każdy. Chciałbym, żeby przy zmianie szerokości okna jeden z nich utrzymywał stałą szerokość (czyli tą, która domyślnie była 50vw), a drugi aby się proporcjonalnie zmniejszał. Problem jest taki, że przy inicjowaniu 50vw jest załóżmy 900px, a po zmniejszeniu okna to już np. 500px. Jednak ja bym chciał, żeby te 900px utrzymało się dopóki drugi element będzie miał szerokość 0 i wtedy przeskoczyło na 100vw/%. Chciałbym się dowiedzieć, czy da się to zrobić bez użycia media queries.

Jeśli określimy jednemu elementowi szerokość minimalną w pikselach to możemy zrobić coś podobnego za pomocą funkcji clamp

<style>
  .flexbox {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .box:first-child {
    flex: 1 1;
    min-width: clamp(1%, 300px, 100%);
  }

  .box:last-child {
    flex: 1 1;
  }
</style>

<div class="flexbox">
  <div class="box" style="height: 50px; background: black"></div>

  <div class="box" style="height: 50px; background: brown"></div>
</div>

Gouda105 napisał(a):

Witam,
mam dwa elementy obok siebie o szerokościach po 50vw każdy. Chciałbym, żeby przy zmianie szerokości okna jeden z nich utrzymywał stałą szerokość (czyli tą, która domyślnie była 50vw), a drugi aby się proporcjonalnie zmniejszał.

Czyli jeśli otworzę okno na szerokości 2000px, to elementy mają mieć po 1000px, i jak zmniejszę okno do 1500px; to mają mieć 1000px i 500px, jak rozumiem? Ale jak od razu otworzę okno na 1500px, to co wtedy? Oba maja mieć po 750px?

Gouda105 napisał(a):

Chciałbym się dowiedzieć, czy da się to zrobić bez użycia media queries.

Jeśli chodzi Ci o to żeby strona wyglądała ładnie na różnych rozmiarach okna, to na 99% się nie da ich ominąć.

Poza tym, masz jakiś konkretny powód żeby ich nie używać?