I have a React app where I created a card with specified min width and height, containing only a header. I want to add flexbox that occupies the entire left space with justify-content="center" and align-items="center". This way, when I insert a circular progress element, it will be at the center of the card. However, no matter what I try, the flexbox's height matches the loading spinner's height and doesn't take up the full space. How can I resolve this issue?
My Component:
function AccountSettings({isLoading, id, username, isDisable}) {
const classes = useStyles();
return (
<Card
className={classes.accountSettings}
>
<CardHeader
title="Something"
/>
<Divider/>
<Box
display="flex"
alignItems="center"
justifyContent="center"
height={"100%"}
width={"100%"}
>
<CircularProgress/>
</Box>
</Card>
);
}
My style:
import {makeStyles} from "@material-ui/styles";
export default makeStyles(theme => ({
root: {
maxWidth: "1000px"
},
pageTitle: {
padding: "5px"
},
accountSettings: {
minWidth: "312px",
minHeight: "273px",
}
}));
Here is my main view:
<div className={classes.root}>
<AccountSettings/>
</div>
This image illustrates my problem: https://i.stack.imgur.com/9bNRr.png