Flexbox顺风：不能让子元素的宽度调整内容

Question

我有这个代码：

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

看起来像这样：

而我希望它像这样根据内容大小调整宽度：

Answer 1

在父容器上使用 inline-flex 而不是 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>

Flexbox顺风：不能让子元素的宽度调整内容

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

html

css

flexbox

tailwind-css