Horizontal scrollbar doesn't obey the rules of spec

Question

Why is this piece of code doesn't horizontally scroll the first content with the F text in it.

Shrink the window width to see the F getting hidden, and there is no way to scroll to it.

.wrap {
  display: flex;
  flex-flow: column;
  justify-content: center;
}

.wrap > div {
  display: flex;
  flex-flow: row;
  justify-content: space-around;
}

.major-staff {
  width: 13em;
  height: 4em;
  background: yellow;
}

<div class='wrap'>
  <div>
   <div class="cmajor"> 
     <label>F</label>
     <div class="major-staff"></div>
   </div>
   <div class="cmajor">
     <label>G</label>
     <div class="major-staff"></div>
   </div>
  </div>
</div>