<div class="flex-container" id="flex-basis">
  <div class="flex-item">flex basis is auto (content size)</div>
  <div class="flex-item">
    flex basis is its width that is equal here to 90px
  </div>
</div>

/* global style */
.flex-container {
  display: flex;
  justify-content: center;
  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-item:nth-child(1) {
  flex-basis: auto; /* default*/
  /* so it's not necessary to declare it */
}

.flex-item:nth-child(2) {
  flex-basis: 90px; /* Or width: 90px;*/
}

/*  The flex-items will begin to shrink with the same speed (flex-shrink=1 by default) when the size of container becomes equal to the sum of all flex-items's flex-basis*/

/* As flex-grow is 0 and flex-shrink is by default 1, you can test the effect of flex-basis with resizing the view panel or just by playing with the flex container's width */