CODEWITHSUNDEEP
htmlcssflexboxtailwind-css
parsecer
parsecer

Reputation: 5106

Flexbox tailwind: can't make the width of child elements adjust the content

I have this code:

<div class = "flex-none   flex-col  bg-gray-500   border border-black rounded   rounded p-5 ">
    <div class=" border w-auto  bg-gray-700 flex-none  flex-col content-start  justify-start  ">
        <div
                class = "border border-red-200 w-auto inline-block flex flex-row content-start
                    justify-start bg-gray-900 cursor-pointer  hover:bg-gray-700
               border rounded   border-black p-2 mt-2   ">
            A

        </div>

        <div
                class = "border border-red-200 w-auto inline-block flex flex-row content-start
                    justify-start bg-gray-900 cursor-pointer  hover:bg-gray-700
               border rounded   border-black p-2 mt-2   ">
            B

        </div>

        <div
                class = "border border-red-200 w-auto inline-block flex flex-row content-start
                    justify-start bg-gray-900 cursor-pointer  hover:bg-gray-700
               border rounded   border-black p-2 mt-2   ">
            C

        </div>
    </div>
</div>

It looks like this:

enter image description here

while I want it to adjust width to the content size like this:

enter image description here

Upvotes: 1

Views: 9938

Answers (1)

Giant Realistic Flying Tiger
Giant Realistic Flying Tiger

Reputation: 143

Use inline-flex on the parent container instead of flex

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">


<div class="flex-none flex-col  bg-gray-500   border border-black rounded   rounded p-5 ">
  <div class=" border w-auto  bg-gray-700 flex-none inline-flex  flex-col content-start  justify-start  ">
    <div class="border border-red-200 w-auto inline-block flex flex-row content-start width-auto
                    justify-start bg-gray-900 cursor-pointer  hover:bg-gray-700
               border rounded   border-black p-2 mt-2 text-white  ">
      A

    </div>

    <div class="border border-red-200 w-auto inline-block flex flex-row content-start
                    justify-start bg-gray-900 cursor-pointer  hover:bg-gray-700
               border rounded   border-black p-2 mt-2  text-white ">
      B

    </div>

    <div class="border border-red-200 w-auto inline-block flex flex-row content-start
                    justify-start bg-gray-900 cursor-pointer  hover:bg-gray-700
               border rounded   border-black p-2 mt-2 text-white  ">
      C

    </div>
  </div>
</div>

Upvotes: 3

Related Questions