Why aren't my flex items wrapping

Question

I am using a flex container with three divs that I want to wrap when the screen shrinks, but they only overlap.

The parent div has:

display: flex;
flex-flow: row wrap;

and the child div's have

flex: none

Yet the child divs grow and shrink, and they don't wrap. What am I doing wrong?

@import 'https://fonts.googleapis.com/css?family=Lato:200,300,400,700';
body {
  width: 60%;
  margin: 0 auto;
  font-family: 'Lato', sans-serif;
  color: #BCBBBB;
  #color: #747704;
}
img {
  display: block;
}
#head {
  border-bottom: 3px solid #BCBBBB;
}
#menu {
  text-align: right;
}
#featured div {
  text-align: center;
}
h1 {
  font-weight: 200;
  text-transform: uppercase;
  margin: 20px 0 5px;
}
h2 {
  font-weight: 400;
  font-size: 1.2em;
  margin-bottom: 6px;
  margin-left: 4px;
}
h3 {
  text-transform: uppercase;
  display: inline;
}
h4 {
  font-weight: 300;
  font-size: .75em;
  text-transform: uppercase;
  margin: 5px 0;
}
h5 {
  font-size: 0.67em;
  margin: 5px 0;
}
#body {
  margin-top: 20px;
}

.row {	
  width: 100%; 
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: space-around;
}
.col-2 {width: 16.67%;}
.col-4 {width: 33.33%; flex: none;}
.col-10 {width: 83.33%;}

<div id="head" class="row">
  <div id="logo" class="col-2">
    <img src="http://placehold.it/90x90" alt="Logo">
  </div>
  <div id="menu" class="col-10">
    <h1>Jane Doette</h1>
    <h4>Front-End Ninja</h4>
  </div>
</div>
<div id="body" class="row">
  <img src="http://placehold.it/550x200" alt="Body">
</div>
<h2>Featured Work</h2>
<div id="featured" class="row">
  <div class="col-4">
    <img src="http://placehold.it/175x90" alt="Featured">
    <br />
    <h3>Appify</h3>
    <br />
    <h5>http://github.com/udacity/appify</h5>
  </div>
  <div class="col-4">
    <img src="http://placehold.it/175x90" alt="Featured">
    <br />
    <h3>Sunflower</h3>
    <br />
    <h5>http://github.com/udacity/sunflower</h5>
  </div>
  <div class="col-4">
    <img src="http://placehold.it/175x90" alt="Featured">
    <br />
    <h3>Bokeh</h3>
    <br />
    <h5>http://github.com/udacity/bokeh</h5>
  </div>
</div>

Answer 1

That's because you use the col-4 class, which imposes

.col-4 {
  width: 33.33%;
  flex: none;
}

Just remove it.

@import 'https://fonts.googleapis.com/css?family=Lato:200,300,400,700';
body {
  width: 60%;
  margin: 0 auto;
  font-family: 'Lato', sans-serif;
  color: #BCBBBB;
  #color: #747704;
}
img {
  display: block;
}
#head {
  border-bottom: 3px solid #BCBBBB;
}
#menu {
  text-align: right;
}
#featured div {
  text-align: center;
}
h1 {
  font-weight: 200;
  text-transform: uppercase;
  margin: 20px 0 5px;
}
h2 {
  font-weight: 400;
  font-size: 1.2em;
  margin-bottom: 6px;
  margin-left: 4px;
}
h3 {
  text-transform: uppercase;
  display: inline;
}
h4 {
  font-weight: 300;
  font-size: .75em;
  text-transform: uppercase;
  margin: 5px 0;
}
h5 {
  font-size: 0.67em;
  margin: 5px 0;
}
#body {
  margin-top: 20px;
}

.row {	
  width: 100%; 
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: space-around;
}
.col-2 {width: 16.67%;}
.col-4 {width: 33.33%; flex: none;}
.col-10 {width: 83.33%;}

<div id="head" class="row">
  <div id="logo" class="col-2">
    <img src="http://placehold.it/90x90" alt="Logo">
  </div>
  <div id="menu" class="col-10">
    <h1>Jane Doette</h1>
    <h4>Front-End Ninja</h4>
  </div>
</div>
<div id="body" class="row">
  <img src="http://placehold.it/550x200" alt="Body">
</div>
<h2>Featured Work</h2>
<div id="featured" class="row">
  <div>
    <img src="http://placehold.it/175x90" alt="Featured">
    <br />
    <h3>Appify</h3>
    <br />
    <h5>http://github.com/udacity/appify</h5>
  </div>
  <div>
    <img src="http://placehold.it/175x90" alt="Featured">
    <br />
    <h3>Sunflower</h3>
    <br />
    <h5>http://github.com/udacity/sunflower</h5>
  </div>
  <div>
    <img src="http://placehold.it/175x90" alt="Featured">
    <br />
    <h3>Bokeh</h3>
    <br />
    <h5>http://github.com/udacity/bokeh</h5>
  </div>
</div>

Answer 2

Your child divs should have something like this:

flex: 1 1 175px;

http://codepen.io/anon/pen/adXJWM