如何使用 Tailwind 在 Flexbox 中阻止子 div 扩展以适应其父级的宽度

Posted 2023-03-07

【中文标题】如何使用 Tailwind 在 Flexbox 中阻止子 div 扩展以适应其父级的宽度

【英文标题】：How to stop a child div expanding to fit the width of its parent in Flexbox with Tailwind

【发布时间】：2021-12-10 06:44:14

【问题描述】：

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-row space-x-2">
    <div class="h-10 w-10 bg-gray-200 rounded-full"></div>
    <div class="flex flex-col space-y-1">
        <div class="flex flex-col p-2 bg-gray-200">
            <span class="text-xs font-semibold tracking-tight">Username</span>
            <p class="text-sm font-base">comment</p>
        </div>
        <div class="flex flex-row pl-2 space-x-1">
            <span class="text-xs font-bold">Like</span>
            <button class="text-xs font-bold hover:text-blue-600">Reply</button>
            <span class="text-xs font-bold">October 24</span>
        </div>
    </div>
</div>

我有一个简单的问题，但它让我疯狂地试图解决它。我有一个简单的评论组件。问题是，如何停止包含用户名和评论的 div 扩展（原样）到其父级的宽度？矩形灰色 div 应该只是其内容的宽度，即“评论”，而不是它下面的内容的宽度，它决定了父级的大小

我这里有一个沙盒：https://play.tailwindcss.com/nEisDNFj4v

这是示例代码：

<div class="flex flex-row space-x-2">
    <div class="h-10 w-10 bg-gray-200 rounded-full"></div>
    <div class="flex flex-col space-y-1">
        <div class="flex flex-col p-2 bg-gray-200">
            <span class="text-xs font-semibold tracking-tight">Username</span>
            <p class="text-sm font-base">comment</p>
        </div>
        <div class="flex flex-row pl-2 space-x-1">
            <span class="text-xs font-bold">Like</span>
            <button class="text-xs font-bold hover:text-blue-600">Reply</button>
            <span class="text-xs font-bold">October 24</span>
        </div>
     </div>
 </div>

非常感谢，马特

【参考方案1】：

您可以将.p-2 设置为align-self: flex-start;

链接：https://play.tailwindcss.com/n63l2rncAa?file=css

【讨论】：

太棒了，非常感谢 Si8，它完美运行我希望使用 play.tailwindcss.com 对你来说不是太大的问题。再次感谢！

【参考方案2】：

还有更简单的方法：

将items-start 类添加到您的第三个div：

<div class="flex flex-col items-start space-y-1">

这是链接：https://play.tailwindcss.com/piFbOgE3I0

【讨论】：

谢谢 Tromgy，我从来没有用过 items-start，很高兴知道