如何使CSS网格容器始终填充可用的垂直空间

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>
    </>
  );
}

Answer 1

如果要确保蓝色正方形在网格中单独渲染时填满所有空间。您只需要给您的蓝方提供100％的宽度，然后让网格CSS处理其余部分即可。

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

注意：如果我误解了您的问题，请立即告诉我。

Answer 2

终于有了解决方法-https://codesandbox.io/s/minimumheightgrid-nh2oq

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

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

和元素（蓝色）

maxHeight: "200px"