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

Question

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

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

的大小

我这里有一个沙箱：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>

非常感谢，马特

Answer 1

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

Link: https://play.tailwindcss.com/n63l2rncAa?file=css

Answer 2

还有更简单的方法：

将 items-start class 添加到第三个 div:

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

这是 link：https://play.tailwindcss.com/piFbOgE3I0

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

How to stop a child div expanding to fit the width of its parent in Flexbox with Tailwind

css

flexbox

tailwind-css