垂直滚动时Tailwind CSS内容无法完全显示的问题排查

问题描述 #

我使用Tailwind CSS编写了如下HTML结构，测试时垂直滚动无法查看全部内容，尝试调整h-full类后内容仍无法适配可用屏幕空间，请问问题出在哪里？

<script src="https://cdn.tailwindcss.com"></script>

<div class="absolute left-0 top-0 bottom-0 right-0 overflow-y-hidden">
  <div class="bg-white px-6 py-3">
    <div class="flex items-center justify-between">
      <h1 class="font-semibold text-xl text-uppercase mt-3">Test title</h1>
      <h1 class="font-semibold text-xl text-uppercase mt-3">Test sub title</h1>
    </div>
  </div>
  <form class="h-full">
    <div class="overflow-auto h-full">
      <table class="table border-separate min-w-full whitespace-nowrap">
        <thead class="sticky top-0 bg-gray-300">
          <tr>
            <th>Customer name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Sample customer name</td>
          </tr>
          <tr>
            <td>Sample customer name</td>
          </tr>
          <!-- 省略大量重复的表格行 -->
        </tbody>
      </table>
    </div>
  </form>
</div>

问题原因 #

核心问题是高度分配逻辑错误：

• 最外层容器设置了overflow-y-hidden，但内部form使用h-full会占满整个容器高度，加上顶部标题栏的高度后，总内容高度超出容器范围，超出部分被直接隐藏，无法触发滚动。
• 滚动容器的h-full是基于父元素form的高度，而form没有减去顶部标题栏的高度，导致滚动区域高度溢出，无法正常显示全部内容。

解决方案 #

调整容器的布局方式，让滚动区域自动占据剩余空间：

1. 给最外层容器添加flex flex-col，实现垂直方向的弹性布局。
2. 将form的h-full替换为flex-1，让它自动填充容器的剩余空间（减去顶部标题栏的高度）。
3. 保留滚动容器的overflow-auto h-full，此时它的高度会基于form的正确高度，滚动功能正常生效。

修改后的代码：

<script src="https://cdn.tailwindcss.com"></script>

<div class="absolute left-0 top-0 bottom-0 right-0 flex flex-col">
  <div class="bg-white px-6 py-3">
    <div class="flex items-center justify-between">
      <h1 class="font-semibold text-xl text-uppercase mt-3">Test title</h1>
      <h1 class="font-semibold text-xl text-uppercase mt-3">Test sub title</h1>
    </div>
  </div>
  <form class="flex-1">
    <div class="overflow-auto h-full">
      <table class="table border-separate min-w-full whitespace-nowrap">
        <thead class="sticky top-0 bg-gray-300">
          <tr>
            <th>Customer name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Sample customer name</td>
          </tr>
          <!-- 其余表格行保持不变 -->
        </tbody>
      </table>
    </div>
  </form>
</div>

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