css - Make Material UI Grid container grow with flexGrow

Question

I am creating a chat window where I have my users on the left and my messages on the right. The thing is I want both columns to grow to the end of the viewport or till the footer but there is no way to make it works. Here is my component.

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;

The container is inside a flex element and the Grid Container has flexGrow property 1. What is not working here?

Here is how it renders now. It's like my Grid container has no height and actually I want it to grow all down to the footer.

question from:https://stackoverflow.com/questions/65890530/make-material-ui-grid-container-grow-with-flexgrow

Answer 1

You can do this in material-ui with css grid

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