<p>I have a flex container containing two flex items. The first flex item should determine the width of the container, and the second flex item should wrap around it. I'm using Tailwind CSS for styling, but I can't get the layout I want. <br /><br />This is my current code: </p><p><br /></p> <pre class="brush:html;toolbar:false;"><div class="flex flex-col"> <div class="flex-initial w-2/3 bg-blue-500 p-4"> <!-- The first child --> <!-- Content of the first child --> </div> <div class="bg-red-500 p-4"> <!-- All the rest components wrap around it --> <!-- Content of the rest components --> </div> </div> </pre> <p>I tried using w-2/3 to set the width of the first child, but the second child still takes up all the available space in the container. How should I make the second flex item wrap around the first item and let the first item determine the width of the container? <br /><br />Thanks very much for any help or guidance you can provide! Thanks in advance! </p><p><br /></p>

<div class="w-fit flex flex-col">
  <div class="flex-initial w-56 bg-blue-500 p-4"> <!-- The first child -->
    <!-- Content of the first child -->
  </div>
  <div class="bg-red-500 p-4"> <!-- All the rest components wrap around it -->
    <!-- Content of the rest components -->
  </div>
</div>