Flexbox flex-wrap is showing images flow over each other

Question

I can't seem to get flex-wrap: row wrap to work in the following code. The images just flow over each other instead of wrapping into new rows. What am I doing wrong? I'm using the latest version of Chrome.

You can see the codepen here:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.row {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
}
.col-4 {
  width: 33.33%;
  text-align: center;
}

<div class="row">
  <h2>Featured Work</h2>
</div>
<div class="row bottom">
  <div class="col-4">
    <img src="https://i.stack.imgur.com/QfaLm.gif">
    <h3>APPIFY</h3>
  </div>
  <div class="col-4">
    <img src="https://i.stack.imgur.com/QfaLm.gif">
    <h3>SUNFLOWER</h3>
  </div>
  <div class="col-4">
    <img src="https://i.stack.imgur.com/QfaLm.gif">
    <h3>BOKEH</h3>
  </div>
</div>

Answer 1

The problem is that you enforce a 33% width, even if the content is wider:

.col-4 {
  width: 33.33%;
}

Instead, use a min-width. Then, the flex items will be allowed to grow more than that if their content is wider.

.col-4 {
  min-width: 33.33%;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.row {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
}
.col-4 {
  min-width: 33.33%;
  text-align: center;
}

<div class="row">
  <h2>Featured Work</h2>
</div>
<div class="row bottom">
  <div class="col-4">
    <img src="https://i.stack.imgur.com/QfaLm.gif">
    <h3>APPIFY</h3>
  </div>
  <div class="col-4">
    <img src="https://i.stack.imgur.com/QfaLm.gif">
    <h3>SUNFLOWER</h3>
  </div>
  <div class="col-4">
    <img src="https://i.stack.imgur.com/QfaLm.gif">
    <h3>BOKEH</h3>
  </div>
</div>