Enforcing vertical size in Grid component - reactjs

Question

I am currently trying to create a layout where a box is divided into multiple sections, where each is on top of another. The middle grid item contains a List which most likely would become so long that it needs to be scrolled up and down. Because I want to divide this area into sections, I used Grid component to create this. This is the code I used to test it:
return (
<Grid container spacing={0}>
<Grid item xs={2}>
<Grid container spacing={2} direction='column'>
<Grid item xs={3}>
<Card>
ABCD
</Card>
</Grid>
<Grid item xs={6}>
<List sx={{overflow: 'auto'}}>
{displayRows()}
</List>
</Grid>
<Grid item xs={3}>
<Card>
IJKL
</Card>
</Grid>
</Grid>
</Grid>
<Divider orientation='vertical' flexItem/>
</Grid>
);
Where displayRow() returns an array of ListItems.
Problem is when the list size changed. When it is too long, it messes with other components. When the list is too small, the card doesn't extend all the way until the next grid item (as in, the middle card should be long enough to touch the card that says "IJKL"). How can I make it so that the middle area is always as big as it can get, but only within the given space?

Answer 1

Found out that spamming height="100%" works. It works, and it doesn't involve hardcoding heights into each elements so I suppose this is a valid solution.
<Grid item xs={3} height='100%'>
<Grid container spacing={1} height='100%' direction='column'>
<Grid item xs={3}>
<Card sx={{height: '100%', width: '100%'}}>123</Card>
</Grid>
<Grid item xs={3}>
<Card sx={{height: '100%', width: '100%'}}>123</Card>
</Grid>
<Grid item xs={3}>
<Card sx={{height: '100%', width: '100%'}}>123</Card>
</Grid>
<Grid item xs={3}>
<Card sx={{height: '100%', width: '100%'}}>123</Card>
</Grid>
</Grid>
</Grid>
Edit: Apparently, for a grid item that contains a list, it needs to have height of 0 for it to work as expected. Weird.
<Grid item xs={10} height='0'>
<List sx={{ overflow: 'auto', width: '100%', padding: 0, height: '100%'}}>
{displayRows()}
</List>
</Grid>