div子元素无法调整

Posted 2023-03-17

参考技术A 直接在高度塌陷的父元素的最后，添加一个空白的div。通过查询div子元素资料了解显示得知，div子元素可直接在高度塌陷的父元素的最后，添加一个空白的div。

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

【中文标题】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>