使用 flexGrow 使 Material UI Grid 容器增長

Question

我正在創建一個聊天 window，其中我的用戶在左側，我的消息在右側。 問題是我希望兩列都增長到視口的末尾或頁腳，但沒有辦法讓它工作。 這是我的組件。

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 容器沒有高度一樣，實際上我希望它全部長到頁腳。

Answer 1

您可以使用 css 網格在 material-ui 中執行此操作

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