如何在React/TailwindCSS布局中阻止Div超出父元素高度

我在开发使用TailwindCSS的React应用时，遇到任务列表容器Div垂直高度超出预期的问题。希望这个Div能占据父元素扣除标题和间距后的剩余高度，内容溢出时自动滚动，但它一直超出父元素高度，导致整个布局破裂。

需求目标 #

• 仪表盘布局包含侧边栏（DesktopNavbar）和主内容区
• 任务列表Div需要：
  1. 占据父元素扣除标题和间距后的剩余高度
  2. 内容超出时启用overflow-auto滚动
  3. 绝对不能超出父元素高度
• 父元素高度为85vh，需用百分比高度实现动态布局

问题现象 #

即使给任务列表Div设置了h-full、flex-1、overflow-auto属性，它还是会超出父元素高度，导致布局溢出视口，而且没有出现预期的滚动条。

相关布局代码 #

AppLayout.js #

import React from 'react'
import { Outlet } from 'react-router-dom'
import DesktopNavbar from './DesktopNavbar'
import MobileNavbar from './MobileNavbar'

const AppLayout = () => {
  return (
    <div className='h-screen w-screen bg-[#FAF4E5] text-[#3A3329] xl:flex xl:items-center xl:gap-28'>
      <div className='hidden xl:block'><DesktopNavbar /></div>
      <div className='mb-11 xl:hidden'><MobileNavbar /></div>
      <main className='h-[85%] flex-1 pr-8'>
        <Outlet />
      </main>
    </div>
  )
}

export default AppLayout

Dashboard.js #

import React from 'react'
import Task from '../components/Task'

const Dashboard = () => {
  // const days = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb']
  return (
    <section className='flex size-full flex-col gap-14'>
      <h1 className='text-4xl font-bold'>Seu resumo, John Doe.</h1>
      <div className='grid max-h-full flex-1 grid-cols-custom'>
        <div className='flex flex-col gap-5'>
          <h2 className='text-2xl font-medium'>Tarefas de Hoje</h2>
          <div className='flex w-fit flex-1 flex-col gap-3 overflow-hidden rounded-2xl border-[3px] border-[#3A3329] bg-[#EDE7D9] px-4 py-8'>
            {
              Array.from({ length: 4 }).map((_, i) => (
                <Task key={i} />
              ))
            }
          </div>
        </div>
        <div>col 2</div>
      </div>
    </section>
  )
}

export default Dashboard

解决方案 #

问题出在布局层级的flex约束和高度计算上，调整如下：

修改后的Dashboard代码 #

import React from 'react'
import Task from '../components/Task'

const Dashboard = () => {
  return (
    <section className='flex size-full flex-col gap-14'>
      <h1 className='text-4xl font-bold'>Seu resumo, John Doe.</h1>
      <div className='grid flex-1 grid-cols-custom'>
        <div className='flex flex-1 flex-col gap-5'>
          <h2 className='text-2xl font-medium'>Tarefas de Hoje</h2>
          <div className='flex-1 overflow-auto rounded-2xl border-[3px] border-[#3A3329] bg-[#EDE7D9] px-4 py-8'>
            {Array.from({ length: 4 }).map((_, i) => (
              <Task key={i} />
            ))}
          </div>
        </div>
        <div>col 2</div>
      </div>
    </section>
  )
}

export default Dashboard

关键调整点 #

1. 给grid容器的第一列（flex flex-col gap-5的div）添加flex-1，确保它在grid布局中占据可用的垂直空间
2. 移除任务列表容器的w-fit，避免宽度自适应导致高度计算异常
3. 将任务列表的overflow-hidden改为overflow-auto，内容超出时自动显示滚动条
4. grid容器用flex-1代替max-h-full，确保它占据section扣除标题后的剩余高度

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