<div id="container">
  <div class="item">flex-shrink: 1</div>
  <div class="item">flex-shrink: 5</div>
  <div class="item">flex-shrink: 3</div>
</div>
#container {
  display: flex;
  background-color: orange;
}

.item {
  background-color: dodgerblue;
  color: white;
  flex-basis: 200px;
  flex-grow: 1;
}

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

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

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

div {
  border: 2px solid black;
  padding: 10px;
  margin-right: 5px;
  box-sizing: border-box;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js