Make Material UI Grid container grow with flexGrow - css

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.

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