Material UI - Grid CardContent force overflow y only - html

Question

I have a project that builds a Dashboard using Material UI, the dashboard can have plots and different content inside a Material UI Card.
When there is enough y-space the content works just fine like this:
But when the vertical space is not enough the content overflow kinda breaks and places some items on the right instead of overflowing vertically.
The idea is that the plot will use any available space and the text will use just what it needs.
All the code for this is here: https://github.com/danielfrg/jupyter-flex/blob/main/js/src/Card/index.js
But I will put some pieces here to help.
This is the Card:
<Grid
item
container
className={`card ${cardsClsName} ${customClsNames}`}
direction="column"
alignItems="stretch"
xs={size}
>
{header ? <Grid item>{header}</Grid> : null}
<Grid
item
component={MaterialCard}
className={`${boxClsName} ${
verticalLayout == "scroll" ? classes.boxVLScroll : ""
}`}
variant="outlined"
xs
>
<Grid
item
container
direction="column"
component={CardContent}
className={cardContentClsName}
xs
>
{bodyComponents}
</Grid>
</Grid>
{footerComponents.length > 0 ? (
<Grid
item
container
component={CardActions}
className={classes.cardFooter}
>
{footerComponents}
</Grid>
) : null}
</Grid>
And the Material Styles that I apply to these:
const styles = (theme) => ({
card: {},
cardInColumn: {},
cardInRow: {},
cardInTabs: {
maxWidth: "100%",
height: "100%",
},
cardInSidebar: {
maxWidth: "100%",
height: "100%",
padding: 8,
},
cardHeader: {
padding: "6px 8px",
},
cardTitle: {
padding: "5px 0",
fontSize: "1.05em",
fontWeight: 600,
},
space: {
flexGrow: 1,
},
box: {},
boxVLScroll: {
flexBasis: "auto",
},
boxInSidebar: {
flexGrow: 1,
border: "none",
},
cardContent: {
maxWidth: "100%",
minHeight: "100%",
height: "100%",
overflow: "auto",
},
cardContentInSidebar: {
height: "100%",
display: "flex",
flex: "1 1 auto",
flexDirection: "column",
padding: "0 8px",
},
cardFooter: {
padding: "0 8px 8px",
},
empty: {
margin: "auto",
padding: theme.spacing(2),
textAlign: "center",
color: theme.palette.text.secondary,
},
});
I appreciate any pointers I am not the best when it comes to CSS.
Thanks!