Flexbox tailwind：无法使子元素的宽度调整内容

Posted 2023-03-07

【中文标题】Flexbox tailwind：无法使子元素的宽度调整内容

【英文标题】：Flexbox tailwind: can't make the width of child elements adjust the content

【发布时间】：2020-12-11 14:58:37

【问题描述】：

我有这个代码：

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

看起来像这样：

虽然我希望它像这样将宽度调整为内容大小：

【参考方案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>