I've been working on a chat window layout that features my users on the left and messages on the right. However, I'm facing an issue with making both columns extend to the end of the viewport or footer. Below is the component code I'm using:
import Grid from "@material-ui/core/Grid";
const Example = () => {
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 Example;
The Grid Container is nested inside a flex element with a flexGrow property of 2. Despite this setup, there seems to be an issue. What could be causing it?
On rendering, the current output shows that the Grid container doesn't have enough height for full extension down to the footer as desired.