时间戳

首页 > 解决方案 > 如何使用 Tailwind 在 Flexbox 中阻止子 div 扩展以适应其父级的宽度

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

问题描述

<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.tai​​lwindcss.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>

非常感谢，马特

标签： cssflexboxtailwind-css

解决方案

还有更简单的方法：

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

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

这是链接：https ://play.tai​​lwindcss.com/piFbOgE3I0

推荐阅读