How to stop one columns width from shrinking and have the other column fill the remaining width

    <div class='container'>
      <div class='col-1'></div>
      <div class='col-2'></div>
    </div>

.container{
  width: 100vw;
  height: 100vh;
  display: flex;
}

.col-1{
  width: 40%;
  height: 100%;
  background-color: blue;
}

.col-2{
  width: 60%;
  height: 100%;
  background-color: red;
}

How can I achieve the result of col-1 adjusting its width up until a certain point? (let’s say its width will stop shrinking at 20 rem, and col-2’s width will auto adjust to fill the remaining width of the container space available?

>Solution :

Start ditching flex in favor of grid, it’s so much easier and more powerful as well:

body { margin: 0; }

.container {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: minmax(15rem, 1fr) 1fr;
}

.col-1 {
  background-color: blue;
}

.col-2 {
  background-color: red;
}

<div class='container'>
  <div class='col-1'></div>
  <div class='col-2'></div>
</div>