Question 222055 in CSS Question posted in
Some basic documentation can be found here.

How to make the second flex item wrap around the first item in Tailwind CSS?

I have a flex container with 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 seem to get the desired layout.

Here’s 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’ve 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 can I make the second flex item wrap around the first item and have the first item determine the container’s width?

Any help or guidance would be greatly appreciated! Thanks in advance!

Tags:

2

Answers


  1. 0

    I’m not sure if I totally understand your question, but here’s what I think is the solution:

    • First use a fixed width for the first child div something like w-56
    • Then give the parent div a w-fit class
    <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>
    Login or Signup to reply.
  2. 0

    I am not completely sure what you mean, but from what I understand you want the second element to be the rest (but not 100% of available space?)

    <div class="flex flex-wrap">
  <div class="flex-shrink-0 w-2/3 bg-blue-500 p-4">
    <!-- Content of the first child -->
  </div>
  <div class="flex-wrap flex-grow bg-red-500 p-4">
    <!-- Content of the rest components -->
  </div>
</div>

    If this is not what you need, would you be able to provide a quick sketch of some sort to make it easier to visualize, and help you further.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search