Flex-wrap iOS Safari and Chrome

Question

Flex wrap is not working on Safari and Chrome - this seems to be well documented but none of the fixes I have read work in my situation.

On iOS Safari and Chrome, the rows simply don't wrap and will go outside of the container. I've tried running it through Autoprefixer, but still no joy.

Here's a reduced test case: https://codepen.io/jciw/pen/yxPebP

* {
  box-sizing: border-box;
}

body {
  background-color: #ccc;
}

.container {
  width: 1000px;
  margin: 0 auto;
  background-color: white;
}

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -25px;
  margin-right: -25px;
}

.column-one-third {
  width: 33.333%;
  padding-left: 25px;
  padding-right: 25px;
}

<div class="container">
  <div class="row">
    <div class="column-one-third">
      <h1>Hello</h1>
    </div>
    <div class="column-one-third">
      <h1>Hello</h1>
    </div>
    <div class="column-one-third">
      <h1>Hello</h1>
    </div>
    <div class="column-one-third">
      <h1>Hello</h1>
    </div>
    <div class="column-one-third">
      <h1>Hello</h1>
    </div>
    <div class="column-one-third">
      <h1>Hello</h1>
    </div>
    <div class="column-one-third">
      <h1>Hello</h1>
    </div>
    <div class="column-one-third">
      <h1>Hello</h1>
    </div>
    <div class="column-one-third">
      <h1>Hello</h1>
    </div>
    <div class="column-one-third">
      <h1>Hello</h1>
    </div>
    <div class="column-one-third">
      <h1>Hello</h1>
    </div>
    <div class="column-one-third">
      <h1>Hello</h1>
    </div>
    <div class="column-one-third">
      <h1>Hello</h1>
    </div>
    <div class="column-one-third">
      <h1>Hello</h1>
    </div>
  </div>
</div>