<div class="controls">
  
  <label for="flexshrink1">.item-1 flex-shrink:</label>
  <select id="flexshrink1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="0.5">0.5</option>
    <option value="0">0</option>
  </select>

  <label for="flexshrink2">.item-2 flex-shrink:</label>
  <select id="flexshrink2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="0.5">0.5</option>
    <option value="0">0</option>
  </select>
  
  <label for="flexshrink3">.item-3 flex-shrink:</label>
  <select id="flexshrink3">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="0.5">0.5</option>
    <option value="0">0</option>
  </select>
</div>

<div class="container">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
</div>

html {
  background: #f6faff;
}

/*-- --*/
.container {
  width: 40rem;
  background-color: darkslategrey;
  padding: 1rem;
  display: flex;
  flex-direction: row;
}
.item {
  flex-shrink: 1;
  font-size: 2rem;
  line-height: 1;
  text-align: center;
  width: 20rem;
  padding: 2rem 1rem;
  background: #e2f0ef;
  border: 3px solid #51aaa3;
  color: #51aaa3;
  margin: 6px;
}

.controls {
  padding: 30px 6px;
  font-size: 1.2rem;
  color: #2f4f4f;
}

.controls select {
  margin-right: 20px;
  color: #2f4f4f;
}

$(document).ready(function(){
  
  $("#flexshrink1").change(function () {
      var flexshrink = $("#flexshrink1").val();
      $(".item-1").css("flex-shrink",flexshrink);
  });
  
  $("#flexshrink2").change(function () {
      var flexshrink = $("#flexshrink2").val();
      $(".item-2").css("flex-shrink",flexshrink);
  });
  
  $("#flexshrink3").change(function () {
      var flexshrink = $("#flexshrink3").val();
      $(".item-3").css("flex-shrink",flexshrink);
  });
  
});