Bootstrap flex-wrap div not pushing second div to the side to accommodate flex-item(s)

Question

I have two divs, sharing a parent (flex-row) div. The first of these divs is a column, in which there's several small elements. The second is a simple long vertical block.

The expected behaviour (though this might be where I'm wrong) is that when the column of items doesn't have enough height and wraps its elements in a second column, the div would expand to be wider to display these wrapped elements and push the second div (the long vertical block) to the side.

What actually happens is that the first div wraps correctly, but instead of pushing the other div further right, it displays wrapped items underneath the second div, so under the long block.

html:

<div class="d-flex flex-row block-div">
  <div class="d-flex flex-column flex-wrap small-block-div">
    <div class="small-block flex-item"></div>
    <div class="small-block flex-item"></div>
    <div class="small-block flex-item"></div>
    <div class="small-block flex-item"></div>
    <div class="small-block flex-item"></div>
    <div class="small-block flex-item"></div>
    <div class="small-block flex-item"></div>
    <div class="small-block flex-item"></div>
    <div class="small-block flex-item"></div>
    <div class="small-block flex-item"></div>
    <div class="small-block flex-item"></div>
  </div>
  <div class="big-block flex-item">
  </div>
</div>

css:

.block-div {
  max-height: 100%;
  max-width: 100%
}

.small-block-div {
  max-height: 100%;
  max-width: 100%;
}

.small-block  {
  width: 6em;
  height: 4em;
  margin: 0.5em;
  background-color: lightgrey;
}

.big-block {
  width: 4em;
  height: 25em;
  margin: 0.5em;
  background-color: grey;
}

How can I make the small-block-div become wider as the child elements wrap?

I've attempted using 100vh instead of 100% with no changes, tried display:inline and display:block (and d-inline-flex as class), tried just removing the block-div and small-block-div classes in case they were overwriting default bootstrap behaviour somehow, which doesn't seem to be the case.

Tried flex-container and just wrap instead of flex-wrap as classes (on the small-block-div), also to no avail.

Apologies if this has been asked before, I went through all the suggested related questions but did not find anything that seemed to immediately be the same issue as I'm having.

Edit: figured I'd add a codepen link! https://codepen.io/anon/pen/NyxGow Code might not be 1:1 accurate to the above code because I've still been messing with it trying to fix it but the behaviour is the same.