Guide on how to wrap second flex item around first item in Tailwind CSS

Question

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.

This is my current code:

<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>

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?

Thanks very much for any help or guidance you can provide! Thanks in advance!

Answer 1

I'm not sure I fully understand your problem, but here's what I think is the solution:

• First, for the first child div, use a fixed width, like w -56.
• Then add a w-fit class to the parent div.

<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>