如何用TailwindCSS让子元素占满父元素剩余垂直高度？

• 修正顶层div高度问题：把h-screen换成min-h-[calc(100vh-头部高度)]，比如你的头部是h-16（对应4rem），就写min-h-[calc(100vh-4rem)]，这样能避开头部占用的空间，不会导致页面溢出。如果不确定头部高度，也可以给顶层div的父容器（比如body）加min-h-screen flex flex-col，然后顶层div用flex-1，自动填充body的剩余空间。

• 调整子div高度：把蓝色子div的h-3/4改成h-full或者flex-1，让它填满父元素的可用空间，而非固定占3/4高度。同时因为父元素是flex flex-row，子div需保持flex布局属性，确保横向也能正确填充。

修改后的代码示例（依赖body布局设置）：

<!-- 需先给body添加class="min-h-screen flex flex-col" -->
<div className="flex flex-auto justify-center outline flex-1">
    {/* Container for the ticket info and interface */}
    <div className="flex flex-row w-1/2 h-full content-center rounded-lg shadow-lg p-2 m-3 outline outline-blue-300">
        {/* left hand side container that has the status picture and some buttons. */}
        <div className=""></div>
    </div>
</div>

独立修改顶层div的版本：

<div className="flex flex-auto justify-center outline min-h-[calc(100vh-4rem)]">
    {/* Container for the ticket info and interface */}
    <div className="flex flex-row w-1/2 h-full content-center rounded-lg shadow-lg p-2 m-3 outline outline-blue-300">
        {/* left hand side container that has the status picture and some buttons. */}
        <div className=""></div>
    </div>
</div>

关键注意点：

• 别直接用h-screen，页面头部会额外占用高度，导致总内容超出视口。
• 子div用h-full或flex-1继承父元素可用高度，替代固定比例值。
• 确保flex容器方向和子元素的flex属性匹配，保证拉伸逻辑生效。

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