<div class="caption">width: 100%;</div>
<div class="flex-container-large">
  <div class="shrink-1 small"> flex-shrink: 1; </div>
  <div class="shrink-1 large"> flex-shrink: 1; </div>
</div>
<div class="caption">width: 70%;</div>
<div class="flex-container-medium">
  <div class="shrink-1 small"> flex-shrink: 1; </div>
  <div class="shrink-1 large"> flex-shrink: 1; </div>
</div>
<div class="caption">width: 50%;</div>
<div class="flex-container-small">
  <div class="shrink-1 small"> flex-shrink: 1; </div>
  <div class="shrink-1 large"> flex-shrink: 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: 35px;
    background-color: darkorange;
    margin: 5px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    whitespace: wrap;
  }
}

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

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

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

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

.small {
  width: 200px;
}

.large {
  width: 600px;
}