React+Tailwind中Div无法占满剩余屏幕高度的问题求助

问题描述：我有一个导航栏（Navbar）和一个Cart组件，需要让Cart填充屏幕高度的剩余空间。绿色为期望实现的效果，蓝色为当前实际显示效果。尝试设置h-screen会导致内容溢出，使用h-full也无法达到预期。

问题原因 #

在flex-col布局的容器中，直接给子元素设置h-full会让元素继承父容器的完整高度，再加上导航栏自身的高度，就会超出屏幕范围。我们需要的是让Cart组件占据容器的剩余可用空间，这时候应该用flex-grow-1属性。

解决方案 #

修改Home.tsx中包裹Cart的div的类名，将h-full替换为flex-grow-1，同时保持Cart组件的h-full以确保它填满父容器的空间：

修改后的Home.tsx

import Navbar from './components/navbar';
import Cart from './components/Cart';

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col">
      <Navbar />
      <div className="flex flex-grow-1">
        <Cart />
      </div>
    </main>
  )
}

Cart.tsx（无需修改）

export default function Cart() {
  return (
    <div className="w-1/5 p-5 text-left border h-full">
        <p>הסל קניות שלי</p>
    </div>
  )
}

原理说明 #

• min-h-screen确保main容器至少占满屏幕高度
• flex-col让main的子元素垂直排列
• flex-grow-1告诉包裹Cart的div在垂直方向上占据所有剩余空间
• Cart的h-full确保它填满父div的高度，从而实现占满导航栏剩余屏幕高度的效果

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