<div class="flex-container">
  <div class="flex-item shrink">
    shrink: 0
  </div>
  <div class="flex-item shrink">
    shrink: 0
  </div>
  <div class="flex-item shrink">
    shrink: 0
  </div>
</div>

<div class="flex-container">
  <div class="flex-item shrink1">
    shrink: 1
  </div>
  <div class="flex-item shrink2">
    shrink: 2
  </div>
  <div class="flex-item shrink3">
    shrink: 3
  </div>
</div>

.flex-container {
  display: flex;
  width: 300px;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #ccc;
}

.flex-item {
  width: 100px;
  margin: 10px;
  padding: 10px;
  background-color: yellow;
}

h1 {
  margin-bottom: 0;
  font-size: 16px;
}

.shrink {
  flex-shrink: 0;
}

.shrink1 {
  flex-shrink: 1
}

.shrink2 {
  flex-shrink: 2
}

.shrink3 {
  flex-shrink: 3
}