<div class="flex-container" id="flex-shrink">
  <div class="flex-item">More shrinked flex item</div>
  <div class="flex-item">Less shrinked flex item</div>
</div>

/* global style */
.flex-container {
  display: flex;
  width: 300px;
  margin: 10px;
  background-color: rgba(211, 211, 211, 0.2);
  border: 1px dashed grey;
}

.flex-item {
  background-color: lightskyblue;
  margin: 5px;
  padding: 8px 14px;
  text-align: center;
  flex-basis: 200px;
}
/* ...................................
......................................
......................................*/

 /* Play with the flex container width to understand more about flex-shrink that conrols the distribution of the negatif free space */

/*  Play also with flex-basis of each flex-item to see more about the effect of flex-shrink property*/

.flex-item:nth-child(1) {
  flex-shrink: 2;
}

.flex-item:nth-child(2) {
  flex-shrink: 1;
}