When I use column-count and display: flex I get odd results in Safari – the content becomes a jumbled mess.

Here is my code:

.container {
  column-count: 4;
}

.row {
    display: flex;
    border: 1px solid #000;
    padding: 1em;
    width: 100%;
}

<div class="container">
  <div class="row">
    <div>
      left
    </div>
    <div>
      right
    </div>
  </div>
  
  <div class="row">
    <div>
      left
    </div>
    <div>
      right
    </div>
  </div>
</div>

For those not using Safari, here is what the output looks like in Safari:

Here is the output in Chrome:

It appears that Safari tries to add the maximum number of columns that I have specified (4) and so it splits the two content containers in half. Is there a way to make this work in Safari short of using JavaScript to calculate the column-count?