<div class="flex-container" id="flex-grow">
  <div class="flex-item">More growed flex item</div>
  <div class="flex-item">Less growed flex item</div>
</div>

/* global style */
.flex-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  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;
}
/* ...................................
......................................
......................................*/

/* To test flex-grow effect, resize the view panel or just play with the flex container's width */
/*  Play also with flex-basis of each flex-item to see more about the effect of flex-grow property */
/* In this example, the first flex-item takes 66.66% from the positif free space  */

.flex-item:nth-child(1) {
  flex-basis: 20px;
  flex-grow: 20;
}

.flex-item:nth-child(2) {
  flex-basis: 0;
  flex-grow: 10;
}