title: Flexbox going outside its container
body: <p>I'm trying to make a header bar in which there are 3 elements, the first one takes up as much space as it can, while the other 2 take up as much as they need.</p>
  
  <pre><code>| title | button | button |
  </code></pre>
  
  <p>The problem happens when the title part is too wide. The content of it does not wrap and it just pushes the buttons off the screen.</p>
  
  <p>Let me demonstrate with a codepen.</p>
  
  <p><a href="https://codepen.io/anon/pen/bqrpVg" rel="noreferrer">https://codepen.io/anon/pen/bqrpVg</a></p>
  
  <p><strong>Update</strong> </p>
  
  <p>I see it working now, but can anyone explain what the values do to achieve what I want, instead of just telling me the solution, so I can understand it.</p>