TailwindCSS中flex-1元素超父元素高度，overflow-y-scroll无效求助

问题场景 #

实现静态导航（顶部+左侧）+右下区域可滚动的页面，采用h-screen的flex-col父容器：顶部栏固定高度，下方用flex-1填充剩余空间。但当可滚动内容过长时，flex-1的Grid容器会被拉伸，导致整个页面超出h-screen范围，设置overflow-y-scroll也无法触发滚动。不想给滚动区设固定高度，希望它自动填充可用空间。

解决方案 #

核心问题是Grid容器默认会被子项内容撑开，导致flex-1的高度约束失效。只需给flex-1的Grid容器添加overflow-hidden，让它严格遵守父级分配的高度，同时确保滚动子项的overflow-y-scroll生效。

修改后的完整代码：

<div class="h-screen flex flex-col">
  <div class="grid grid-cols-3 h-16">
    <div class="col-span-1">
      Title (static)
    </div>
    <div class="col-span-2">
      Info (static)
    </div>
  </div>
  <!-- 添加overflow-hidden约束Grid容器高度 -->
  <div class="flex-1 grid grid-cols-3 overflow-hidden">
    <div class="col-span-1 flex flex-col">
      <div class="flex-1">Menu (static)</div>
      <div>
        About (static)
      </div>
    </div>
    <div class="col-span-2 overflow-y-scroll">
      <p>scrollable:</p>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
    </div>
  </div>
</div>

原理说明 #

• overflow-hidden作用于flex-1的Grid容器，强制它只能占据h-screen减去顶部栏高度后的剩余空间，不会被内部超长内容撑开。
• 右侧滚动区的overflow-y-scroll此时正常生效，因为父级Grid列的高度已被固定，内容超出时自动在自身区域内滚动。
• 左侧静态菜单区域通过flex-col和flex-1仍能填充左侧列的全部可用空间，不受滚动内容影响。

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