Пользовательский интерфейс материала - центр элемента вертикально внутри FlexBox

Question

В своем приложении «Реакция» я создал карточку с минимальной шириной и высотой, которая содержит только заголовок. Я хотел бы добавить flexbox, который бы занимал все левое пространство с justify-content="center" и align-items="center", поэтому, когда я добавляю элемент кругового прогресса, он будет в середине карты. К сожалению, что бы я ни делал, высота flexbox равна высоте загрузочного вертушки, и она не занимает все пространство. Как это исправить? Мой компонент:

   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>
        );
    }

Мой стиль:

import {makeStyles} from "@material-ui/styles";

export default makeStyles(theme => ({
    root: {
        maxWidth: "1000px"
    },
    pageTitle: {
        padding: "5px"
    },
    accountSettings: {
        minWidth: "312px",
        minHeight: "273px",
    }
}));

А вот мой основной вид:

<div className={classes.root}>
    <AccountSettings/>
</div>

На этом изображении показана моя проблема

Answer 1

Вот одно из решений

Добавьте следующее к стилям:

accountSettings: {
  display: 'flex',
  flexDirection: 'column'
},
box: {
  flexGrow: 1
}

И добавьте класс к элементу Box:

<Box
  className={classes.box}