title: How to prevent last flex item from filling remaining width when it is also a flex container
body: <p>I have a container with two flex items. The last flex item is also a flex container which allows its flex items to wrap. My goal is for that last flex item to only occupy as much space as needed, so that when its children wrap, the two main flex items can be centered within the main flex container.</p>
  
  <p>In other words, I would like the red div to only be as wide as necessary, so that the blue and red divs can be centered within the green div. No matter what classes I apply I can't seem to get this to work.</p>
  
  <p>In this example I am using Tailwind classes, but it's still a general CSS question.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.4/tailwind.min.css" rel="stylesheet"/&gt;
  &lt;div class="border-2 border-green-500 flex items-center justify-center" style="width:700px;"&gt;
    &lt;div class="border-2 border-blue-500 mr-2"&gt;
      Left
    &lt;/div&gt;
    &lt;div class="border-2 border-red-500 flex flex-wrap"&gt;
      &lt;span&gt;Right side has much longer text that I would like to wrap.&lt;/span&gt;
      &lt;span&gt;When it wraps why is the red parent still full width?&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's a JSFiddle: <a href="https://jsfiddle.net/flyingL123/26jxpqez/12/" rel="nofollow noreferrer">https://jsfiddle.net/flyingL123/26jxpqez/12/</a></p>