Tailwind CSS overflow-scroll设置问题：子容器超出父容器高度

问题本质 #

max-h-full的生效逻辑是不超过父容器的当前高度，但你顶层容器用的min-h-screen只保证容器至少占满屏幕，当内部内容超出时，父容器会被自动撑开，所有子级的max-h-full都会跟着父容器的高度无限延伸，自然触发不了overflow-scroll——因为容器高度永远能容纳内容，不会出现溢出。

可行解决方案 #

方案1：固定顶层容器高度为视口高度

把顶层的min-h-screen换成h-screen，强制容器高度等于视口高度，不会被内容撑大，子级的max-h-full就能正确继承这个高度上限：

<div class="h-screen bg-slate-900">
  <div class="flex max-h-full justify-between p-4 w-full flex-wrap flex-col gap-4 bg-slate-700">
    <div class="flex max-h-full flex-wrap grid grid-cols-2 sm:grid-cols-1 gap-4 w-full bg-slate-500">   
        <div class="bg-slate-300 max-h-full">
          <div class="bg-slate-100 max-h-full">
            <div class="max-h-full border-2 border-pink-600 pt-4 overflow-scroll">
                <div>
                    <h1>Hello From Testing Land</h1>
                </div>
                <!-- 重复内容 -->
            </div>
          </div>
        </div>
        <div class="h-full flex grid grid-rows-3 sm:grid-rows-1 gap-4">
            <!-- 其他内容 -->
        </div>
    </div>
  </div>
</div>

方案2：用Flex布局分配剩余空间

如果需要保留min-h-screen（比如内容不足时要占满屏幕），可以通过Flex布局让滚动容器的父级占满剩余可用空间，确保滚动容器有明确的高度约束：

<div class="min-h-screen bg-slate-900">
  <div class="flex max-h-full justify-between p-4 w-full flex-wrap flex-col gap-4 bg-slate-700">
    <div class="flex flex-wrap grid grid-cols-2 sm:grid-cols-1 gap-4 w-full bg-slate-500">   
        <div class="bg-slate-300 flex flex-col">
          <div class="bg-slate-100 flex-1">
            <div class="h-full border-2 border-pink-600 pt-4 overflow-scroll">
                <div>
                    <h1>Hello From Testing Land</h1>
                </div>
                <!-- 重复内容 -->
            </div>
          </div>
        </div>
        <div class="h-full flex grid grid-rows-3 sm:grid-rows-1 gap-4">
            <!-- 其他内容 -->
        </div>
    </div>
  </div>
</div>

这里给滚动容器的两层父级分别加上flex flex-col和flex-1，让中间容器自动占满可用空间，滚动容器用h-full就能基于这个固定高度触发滚动。

关于max-h-[90vh]方案的合理性 #

这个方案是可行的，但存在两个局限：

• 硬编码的90vh依赖固定视口比例，如果页面有其他固定高度元素（比如顶部导航），容易出现内容截断或多余滚动条；
• 灵活性不如上述两种方案，Flex布局或h-screen能自动适配父容器空间，不需要手动计算视口比例。

内容的提问来源于stack exchange，提问作者Just Another Programmer