时间戳

首页 > 解决方案 > Flexbox tailwind：不能让子元素的宽度调整内容

html - Flexbox tailwind：不能让子元素的宽度调整内容

问题描述

我有这个代码：

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

它看起来像这样：

在此处输入图像描述

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

在此处输入图像描述

标签： htmlcssflexboxtailwind-css

解决方案

在父容器上使用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>

推荐阅读