I was trying to make a design in which there are 2 grid items i.e. `left` and `right`. I was trying to make the design fluid so that left can take a minimum of its width or 50%

something like `min of(width, 50%)`

I've tried `minmax` but it is just the opposite as I want. Now I'm out of options

**Remember: `first` column would be of dynamic width. Just for testing, I've taken it `200px`. It should be responsive as well.**

In the below snippet I would like the second column to fill the white space between `first` and
`second`

```css
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.left {
  width: 200px;
  background-color: cornflowerblue;
}

.right {
  background-color: cadetblue;
}

.container {
  display: grid;
  height: 100%;
  grid-template-columns: minmax(auto, 1fr) 1fr;
}
```

```html
<div class="container">
  <div class="left">LEFT</div>
  <div class="right"> Right </div>
</div>
```