title: Flexbox width of header aligned with outer part of content
body: <p>I'm using flexbox to align my content blocks in the middle of the page, now i'm willing to align the header with the outer content blocks </p>
  
  <p>In the image you can see what needs to happen</p>
  
  <p>This is my current result:</p>
  
  <p><a href="https://i.stack.imgur.com/cNLwo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cNLwo.png" alt=""></a></p>
  
  <p>And this is how it need's to look like
  <a href="https://i.stack.imgur.com/Zqmxe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Zqmxe.png" alt="enter image description here"></a></p>
  
  <p>So when scaling the browser the content is going to the first line if there is space, the header needs to grow with this at that moment.</p>
  
  <p>Here is a codepen with the flexbox in it </p>
  
  <pre class="lang-css prettyprint-override"><code>.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  </code></pre>
  
  <p><a href="http://codepen.io/Dirkandries/pen/XmpGzw" rel="nofollow noreferrer">http://codepen.io/Dirkandries/pen/XmpGzw</a> </p>
  
  <p>Is this possible without using media queries and <strong>keeping the content boxes the same size</strong>?</p>
  
  <p>*The padding and margin can be removed</p>