如何使用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>

我有一個簡單的問題，但試圖解決它讓我發瘋。我有一個簡單的 Comment 組件。問題是，如何停止包含用戶名和評論的 div 擴展（按原樣）到其父級的寬度？矩形灰色 div 應該只是其內容的寬度，即“注釋”，而不是其下方內容的寬度，后者決定了父級的大小

如何使用 Tailwind 在 Flexbox 中阻止子 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>

非常感謝，馬特

uj5u.com熱心網友回復：

還有更簡單的方法：

將items-start課程添加到您的第三個div：

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

這是鏈接：https : //play.tai??lwindcss.com/piFbOgE3I0

uj5u.com熱心網友回復：

您可以設定.p-2為align-self: flex-start;

鏈接：https : //play.tai??lwindcss.com/n63l2rncAa?file=css

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/335883.html

標籤：css 弹性盒顺风-css

上一篇：如何通過CSS旋轉這些文本？

下一篇：classList.remove()正在洗掉類但不洗掉其內容