如何讓 CSS Grid Container 始終填充可用的垂直空間

Question

我有一個我遇到的問題的簡化版本。 我有一個容器，可以將物品放入其中。 容器設置為display: grid並且我希望它始終填充所有可用的垂直空間，無論其中有什么。

為了說明，我在這里有一個簡單的 CodeSandbox。 我的問題是：

1. 盡管設置了height: 100%為什么容器（灰色）沒有填滿所有可用空間？ （我也試過height: 100vh但它最終也拉伸了里面的元素）
2. 當我從容器中移除某些東西時（即單擊“移除卡片”按鈕），它為什么會縮小？

import Paper from "@material-ui/core/Paper";
import Button from "@material-ui/core/Button";
import { makeStyles } from "@material-ui/styles";
import React, { useState } from "react";
const useStyles = makeStyles({
  cardContainerRootStyle: {
    gridTemplateColumns: "repeat(auto-fit, minmax(348px, 1fr))",
    justifyItems: "center",
    display: "grid",
    gridGap: "1rem",
    margin: "0 auto",
    padding: 15,
    height: "100%"
  }
});

export default function App() {
  const styles = useStyles();
  const [cardCurrentlyDisplayed, setCardCurrentlyDisplayed] = useState([
    <Paper
      style={{ minHeight: "200px", minWidth: "200px", backgroundColor: "blue" }}
    />
  ]);

  return (
    <>
      <Button variant="outlined" onClick={() => setCardCurrentlyDisplayed([])}>
        Remove Card
      </Button>
      <Paper
        style={{ backgroundColor: "grey" }}
        square={true}
        classes={{
          root: styles.cardContainerRootStyle
        }}
      >
        {cardCurrentlyDisplayed}
      </Paper>
    </>
  );
}

2020 年 3 月 9 日更新 - 解決方案- https://codesandbox.io/s/minimumheightgrid-nh2oq

Answer 1

如果要確保藍色方塊在網格中單獨渲染時填充所有空間。 你只需要給你的藍色空間 100% 的寬度，讓網格 css 處理剩下的事情。

這里是分叉沙箱的鏈接https://codesandbox.io/s/minimumheightgrid-i494m

注意：如果我誤解了你的問題，請不要猶豫告訴我。

Answer 2

終於有了解決方案 - https://codesandbox.io/s/minimumheightgrid-nh2oq

更改容器上的以下內容（灰色）

    minHeight: "100vh",
    height: "auto"

並在元素上（藍色）

maxHeight: "200px"