title: Flexbox issue with wrapping and flex-grow: auto
body: <p>I'm struggling with a puzzle I ran myself into. I want to have tabs, which can be multiline, to fill the entire width optimally. For which flex: auto works great. However for some unrelated and unchangable circumstances I also have the container with flex-wrap: wrap and a single item covering the whole width above the tabs.</p>
  
  <p>With flex: auto and flex-wrap: wrap the flex items no longer try to fit into the width by wrapping their content text — they all have it in one line and wrap if they do not fit in.</p>
  
  <p>I've made a fiddle to illustrate it:
  <a href="https://jsfiddle.net/d67mgqvm/" rel="nofollow noreferrer">https://jsfiddle.net/d67mgqvm/</a></p>
  
  <pre><code>&lt;div class="flexbox"&gt;
    &lt;div class="flexitem full"&gt;
      This is a desired behavior but it has to use a wrapper to prevent wrapping
    &lt;/div&gt;
    &lt;div class="wrapper"&gt;  
      &lt;div class="flexitem"&gt;
        Content can be different so I have to use flex: auto so it has more space for longer texts
      &lt;/div&gt; 
      &lt;div class="flexitem"&gt;
        Like I said, it can be short like this one
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="flexbox"&gt;
    &lt;div class="flexitem full"&gt;
      This doesn't work, even though it can fit in all the content if it wraps text inside items
    &lt;/div&gt;  
    &lt;div class="flexitem"&gt;
      Content can be different so I have to use flex: auto so it has more space for longer texts
    &lt;/div&gt; 
    &lt;div class="flexitem"&gt;
      Like I said, it can be short like this one
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've been thinking on if it's even possible to do this without a wrapper for a while now. Looks like flex-basis: min-content should be something like that but it only works in FF...</p>