<div class="controls"> 
  <label for="grid-tracks">grid-tracks:</label>
  <select id="grid-tracks">
    <option value="min-content">min-content</option>
    <option value="max-content">max-content</option>
    <option value="fit-content">fit-content</option>
    <option value="fill-available">fill-available</option>
  </select>
</div>

<div class="wrapper" id="variable">
  <div class="item">Flex Item1</div>
  <div class="item">Extrinsic sizing determines sizes based on the context of an element, without regard for its contents.</div>
  <div class="item">Flex Item4</div>
</div>

*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  min-height: 100vh;
  font-family: 'Open sans', sans-serif;
}
body {
  background: linear-gradient(50deg, #f3c680, hsla(179,54%,76%,1));
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3vh;
}


.controls {
  margin: 0;
  padding: .5em 2em 1em 2em;
  border-bottom: 1px solid #666;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.controls select {
  margin-right: 1.25rem;
  color: #2f4f4f;
  font-size: 1.2rem;
}


.wrapper {
  position: relative;
  background: white;
  border-radius: 15px;
  padding: 3vh;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: space-between;
  min-height: 50vh;
  resize: horizontal;
  overflow: hidden;
  gap: 1vh;
}

.item {
  border: 2vh solid #f36;
  display: flex;
  align-items: center;
  padding: 2vh;
  
  &:nth-child(2) {
    border-color: #90f;
  }
}

.min-content {
  grid-template-columns: repeat(3, min-content)
}

.max-content {
  grid-template-columns: repeat(3, max-content)
}

.fit-content {
  grid-template-columns: repeat(3, fit-content(10rem))
}

.fill-available {
  grid-template-columns: repeat(3, fill-available)
}

const gridTracks = document.getElementById('grid-tracks');
const contentEle = document.getElementById('variable')

gridTracks.addEventListener('change', (e) => {
  console.log('====> width:', e.target.value)
  
  
  if (e.target.value === 'min-content') {
    contentEle.classList.add('min-content')
    contentEle.classList.remove('max-content', 'fit-content', 'fill-available')
  }
  
  if (e.target.value === 'max-content') {
    contentEle.classList.add('max-content')
    contentEle.classList.remove('min-content', 'fit-content', 'fill-available')
  }
  
  if (e.target.value === 'fit-content') {
    contentEle.classList.add('fit-content')
    contentEle.classList.remove('min-content', 'max-content','fill-available')
  }
  
  if (e.target.value === 'fill-available') {
    contentEle.classList.add('fill-available')
    contentEle.classList.remove('min-content', 'max-content', 'fit-content')
  }
})