<div class="caption">width: 100%;</div>
<div class="flex-container-large">
  <div class="shrink-0"> flex-shrink: 0; </div>
  <div class="shrink-1"> flex-shrink: 1; </div>
  <div class="shrink-2"> flex-shrink: 2; </div>
  <div class="shrink-1"> flex-shrink: 1; </div>
</div>
<div class="caption">width: 80%;</div>
<div class="flex-container-medium">
  <div class="shrink-0"> flex-shrink: 0; </div>
  <div class="shrink-1"> flex-shrink: 1; </div>
  <div class="shrink-2"> flex-shrink: 2; </div>
  <div class="shrink-1"> flex-shrink: 1; </div>
</div>
<div class="caption">width: 60%;</div>
<div class="flex-container-small">
  <div class="shrink-0"> flex-shrink: 0; </div>
  <div class="shrink-1"> flex-shrink: 1; </div>
  <div class="shrink-2"> flex-shrink: 2; </div>
  <div class="shrink-1"> flex-shrink: 1; </div>
</div>
<div class="caption">width: 20%;</div>
<div class="flex-container-xtra-small">
  <div class="shrink-0"> flex-shrink: 0; </div>
  <div class="shrink-1"> flex-shrink: 1; </div>
  <div class="shrink-2"> flex-shrink: 2; </div>
  <div class="shrink-1"> flex-shrink: 1; </div>
</div>

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

  & div {
    border: 1px solid black;
    height: 39px;
    line-height: 1;
    background-color: darkorange;
    margin: 3px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    whitespace: wrap;
    width: 175px;
    font-size: 10pt;
  }
}

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

.flex-container-xtra-small {
  width: 20%;
}

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

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

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

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

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

body {
  width: 680px;
  margin-left:auto;
  margin-right: auto;
}