Material UI - Grid CardContent force overflow y only

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!