title: Flexbox within a container ignoring justify-content
body: <p>I want two divs within a flexible container to take up 60% of the space and 30% respectively with even space around them however they are crunched up with no space.</p>
  
  <pre><code>html
  &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;title&gt;gameplan.org.uk | A site for enthusiasts by enthusiasts.        
  &lt;/title&gt;
  
  &lt;link href="test.css" rel="stylesheet"&gt;
  
  &lt;/head&gt;
  
  &lt;header&gt;Header&lt;/header&gt;
  &lt;div id='main'&gt;
  &lt;article&gt;Player Page
  &lt;p&gt;
  &lt;div class='playercontainer'&gt;
  &lt;div class='playerbox1'&gt;Player Summary&lt;/div&gt;
  &lt;div class='playerbox2'&gt;Player Details&lt;/div&gt;
  &lt;/div&gt;
  &lt;/p&gt;
  &lt;/article&gt;
  &lt;nav&gt;Menu&lt;/nav&gt;
  &lt;aside&gt;Stuff&lt;/aside&gt;
  &lt;/div&gt;
  &lt;footer&gt;Footer&lt;/footer&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>and the css:-</p>
  
  <pre><code>body {
  font: 24px Helvetica;
  background: #999999;
  color:rgba(0,0,0,.25);
  }
  
  #main {
  min-height: 800px;
  margin: 0px;
  padding: 0px;
  display: -webkit-flex;
  display:                 flex;
  -webkit-flex-flow: row;
  flex-flow: row;        
  }
  
  #main &gt; article {
  margin: 4px;
  padding: 5px;
  border: 1px solid #cccc33;
  border-radius: 7pt;
  background: #dddd88;
  -webkit-flex: 3 1 60%;
  flex: 3 1 60%;
  -webkit-order: 2;
  order: 2;
  }
  
  #main &gt; nav {
  margin: 4px;
  padding: 5px;
  border: 1px solid #8888bb;
  border-radius: 7pt;
  background: #ccccff;
  -webkit-flex: 1 6 20%;
  flex: 1 6 20%;
  -webkit-order: 1;
  order: 1;
  }
  
  #main &gt; aside {
  margin: 4px;
  padding: 5px;
  border: 1px solid #8888bb;
  border-radius: 7pt;
  background: #ccccff;
  -webkit-flex: 1 6 20%;
  flex: 1 6 20%;
  -webkit-order: 3;
  order: 3;
  }
  
  header, footer {
  display: block;
  margin: 4px;
  padding: 5px;
  min-height: 100px;
  border: 1px solid #eebb55;
  border-radius: 7pt;
  background: #ffeebb;
  }
  
  /* Too narrow to support three columns */
  @media all and (max-width: 640px) {
  
  #main, #page {
  -webkit-flex-flow: column;
  flex-flow: column;
  }
  
  #main &gt; article, #main &gt; nav, #main &gt; aside {
  /* Return them to document order */
  -webkit-order: 0;
  order: 0;
  }
  
  #main &gt; nav, #main &gt; aside, header, footer {
  min-height: 50px;
  max-height: 50px;
  }
  }
  
  
  /*On the flex container*/
  .playercontainer {
  webkit-inline-flex; /* Safari */
  display: inline-flex;     
  -webkit-flex-flow: row;
  flex-flow: row;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  -webkit-justify-content: space-around; /* Safari */
  justify-content: space-around;
  -webkit-flex: 3 1 100%;
  flex: 3 1 0%;
  }
  
  .playerbox1 {
  border-style: solid;
  border-color: #0000ff;
  -webkit-order: 1; /* Safari */
  order: 1;
  -webkit-flex: 3 1 60%;
  flex: 3 1 60%;
  }
  
  
  .playerbox2 {
  border-style: solid;
  border-color: #ff0000;
  -webkit-flex: 1 1 30%; /* Safari */
  flex: 1 1 30%;
  -webkit-order: 1; /* Safari */
  order: 1;
  }
  </code></pre>
  
  <p>I'm sure there's something simple I'm missing but I can't work out what. You can see the code live here <a href="http://gameplan.org.uk/test.php" rel="nofollow">1</a></p>