Tailwind中h-full子元素适配h-screen父元素时尺寸异常问题求助

问题场景 #

使用Tailwind构建的页面代码如下：

<div id="parent" class="flex h-screen flex-col bg-red-600">
  <div id="child1" class="flex h-20 items-center justify-center bg-green-600"><h3>Header</h3></div>
  <div id="child2" class="flex h-full flex-row">
    <div id="child22" class="scroll-y-auto h-full w-full overflow-y-auto bg-blue-600">
      <div id='itemsContainer'>
        <div id="child221" class="h-96 w-full bg-yellow-200">child221</div>
        <div id="child222" class="h-96 w-full bg-yellow-300">child222</div>
        <div id="child223" class="h-96 w-full bg-yellow-400">child223</div>
        <div id="child224" class="h-96 w-full bg-yellow-500">child224</div>
      </div>
    </div>
  </div>
  <div id="child3" class="flex h-20 w-full items-center justify-center bg-green-400"><h3>Footer</h3></div>
</div>

当itemsContainer包含内容时，child22元素尺寸超出浏览器视口，导致Header和Footer布局错乱；若itemsContainer为空则布局正常。

修复方案 #

问题核心在于child2使用的h-full会强制占据父容器的100%高度，忽略Header和Footer的固定高度，导致整体内容超出视口。只需将child2的h-full替换为flex-1，让它自动填充Header和Footer之外的剩余空间即可：

<div id="parent" class="flex h-screen flex-col bg-red-600">
  <div id="child1" class="flex h-20 items-center justify-center bg-green-600"><h3>Header</h3></div>
  <div id="child2" class="flex flex-1 flex-row"> <!-- 替换h-full为flex-1 -->
    <div id="child22" class="scroll-y-auto h-full w-full overflow-y-auto bg-blue-600">
      <div id='itemsContainer'>
        <div id="child221" class="h-96 w-full bg-yellow-200">child221</div>
        <div id="child222" class="h-96 w-full bg-yellow-300">child222</div>
        <div id="child223" class="h-96 w-full bg-yellow-400">child223</div>
        <div id="child224" class="h-96 w-full bg-yellow-500">child224</div>
      </div>
    </div>
  </div>
  <div id="child3" class="flex h-20 w-full items-center justify-center bg-green-400"><h3>Footer</h3></div>
</div>

原理说明 #

• flex-1在flex-col布局中会自动分配父容器剩余的可用空间，完美适配Header和Footer的固定高度，避免内容溢出视口。
• child22的h-full现在基于child2的可用高度计算，配合overflow-y-auto可在内容过多时仅在自身区域内滚动，不会影响Header和Footer的位置。

内容的提问来源于stack exchange，提问作者Jakub Karatník