使用 flexGrow 使 Material UI Grid 容器增长答案

【问题标题】：Make Material UI Grid container grow with flexGrow使用 flexGrow 使 Material UI Grid 容器增长
【发布时间】：2021-04-29 14:21:51
【问题描述】：

我正在创建一个聊天窗口，其中左侧是我的用户，右侧是我的消息。问题是我希望两列都增长到视口的末尾或页脚，但没有办法让它工作。这是我的组件。

import Grid from "@material-ui/core/Grid";
const Prueba = () => {
    return (
        <div style={{ display: "flex" }}>
            <Grid container spacing={1} style={{ flexGrow: 2 }}>
                <Grid
                    item
                    xs={12}
                    sm={12}
                    md={4}
                    lg={3}
                    style={{ background: "black" }}
                ></Grid>
                <Grid
                    item
                    xs={12}
                    sm={12}
                    md={8}
                    lg={9}
                    style={{ background: "blue" }}
                ></Grid>
            </Grid>
            <div
                style={{
                    position: "fixed",
                    bottom: 0,
                    height: 100,
                    width: "100%",
                    backgroundColor: "red",
                }}
            ></div>
        </div>
    );
};

export default Prueba;

容器位于 flex 元素内，并且 Grid Container 具有 flexGrow 属性 1。这里有什么不工作的地方？

这是它现在的渲染方式。就像我的 Grid 容器没有高度一样，实际上我希望它一直增长到页脚。

【问题讨论】：

标签： css flexbox material-ui

【解决方案1】：

您可以在 Material-ui 中使用 css 网格来完成此操作

https://codesandbox.io/s/naughty-yonath-wqr1p?file=/src/App.js

import { styled } from "@material-ui/core";

const Grid = styled("div")({
  display: "grid",
  gridTemplateColumns: "1fr 3fr",
  height: "100vh"
});

const Footer = styled("div")({
  position: "fixed",
  bottom: 0,
  height: 100,
  width: "100%",
  backgroundColor: "tomato"
});

export default function App() {
  return (
    <div className="App">
      <Grid>
        <div style={{ background: "khaki" }}>Left</div>
        <div style={{ background: "lightsalmon" }}>Right</div>
      </Grid>
      <Footer />
    </div>
  );
}

【讨论】：