<div class="caption">width: 60%;</div>
<div class="flex-container-small">
  <div class="grow-0"> flex-grow: 0; </div>
  <div class="grow-1"> flex-grow: 1; </div>
  <div class="grow-3"> flex-grow: 3; </div>
  <div class="grow-1"> flex-grow: 1; </div>
</div>
<div class="caption">width: 75%;</div>
<div class="flex-container-medium">
  <div class="grow-0"> flex-grow: 0; </div>
  <div class="grow-1"> flex-grow: 1; </div>
  <div class="grow-3"> flex-grow: 3; </div>
  <div class="grow-1"> flex-grow: 1; </div>
</div>
<div class="caption">width: 100%;</div>
<div class="flex-container-large">
  <div class="grow-0"> flex-grow: 0; </div>
  <div class="grow-1"> flex-grow: 1; </div>
  <div class="grow-3"> flex-grow: 3; </div>
  <div class="grow-1"> flex-grow: 1; </div>
</div>

.flex-container-small,
.flex-container-medium,
.flex-container-large {
  display: flex;
  background-color: lighten(darkorange, 20%);
  border: 1px solid black;
  margin-bottom: 10px;

  & div {
    border: 1px solid black;
    height: 48px;
    background-color: darkorange;
    margin: 5px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    whitespace: wrap;
  }
}

.flex-container-small {
  width: 60%;
}

.flex-container-medium {
  width: 75%;
}

.flex-container-large {
  width: 100%;
}

.grow-0 {
  flex-grow: 0;
}

.grow-1 {
  flex-grow: 1;
}

.grow-3 {
  flex-grow: 3;
}