Tailwind w-full在Flexbox布局中失效的原因及解决办法

失效原因 #

你的问题核心在于flex容器的直接子元素（第二个无样式<div>）未占满容器宽度。Tailwind的w-full是基于父元素宽度设置width: 100%，但这个父div作为flex子项，默认的flex行为是flex: 0 1 auto——它不会主动拉伸占满flex容器的可用宽度，只会根据自身内容收缩。因此，即便子元素加了w-full，也只能占满这个窄父元素的宽度，无法达到全屏效果。

解决办法 #

只需给flex容器的直接子div添加样式，让它先占满flex容器宽度即可，以下几种方案任选：

方案1：添加w-full类

<div style={{display:'flex', flexWrap: 'wrap', flexDirection: "row"}}>
    <div className="w-full">
        <div className="w-full h-full">
            <div className="flex flex-col border rounded bg-black relative">
                asdofijdsdfij
            </div >
        </div>
    </div>
</div>

方案2：添加flex-1类

让子div自动填充flex容器的剩余空间：

<div style={{display:'flex', flexWrap: 'wrap', flexDirection: "row"}}>
    <div className="flex-1">
        <div className="w-full h-full">
            <div className="flex flex-col border rounded bg-black relative">
                asdofijdsdfij
            </div >
        </div>
    </div>
</div>

方案3：直接设置flex inline样式

原理和flex-1一致：

<div style={{display:'flex', flexWrap: 'wrap', flexDirection: "row"}}>
    <div style={{flex: 1}}>
        <div className="w-full h-full">
            <div className="flex flex-col border rounded bg-black relative">
                asdofijdsdfij
            </div >
        </div>
    </div>
</div>

内容的提问来源于stack exchange，提问作者JobHunter69