我有一個導航條和一個需要填充屏幕高度剩余空間的組件。

綠色-我想得到的結果 藍色-它現在的樣子。

我嘗試過將高度設置為h-screen，但也不起作用...(其過度擬合) 我使用CSS的順風

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 h-full">
            <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>
  )
}

可以考慮將flex-grow: 1應用到& ltdiv & gt& lt購物車& gt以便& ltdiv & gt包裝器的高度增長到屏幕高度中未被& ltNavBar & gt。然后，從& lt購物車& gt根級別& ltdiv & gt以便默認的align-items: stretch生效，允許& lt購物車& gt根級別& ltdiv & gt的高度& ltdiv & gt& lt購物車& gt。

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

<main class="flex min-h-screen flex-col">
  <Navbar>Navbar</Navbar>

  <div class="flex grow">
    <div class="w-1/5 p-5 text-left border">
      <p>??? ????? ???</p>
    </div>
  </div>

</main>