In my project, I am working on a Dialog component which has a maximum width and a minimum height. Inside the DialogContent, I want to have a Box element that stretches to fill out the remaining space of the DialogContent. The goal is to have a background image fill this Box.
Unfortunately, I have been struggling to find a way to make the Box stretch to occupy the remaining space of the dialog content.
<Dialog
fullWidth
maxWidth="md"
open={open}
onClose={handleClose}
PaperProps={{
sx: {
minHeight: "60%"
}
}}
>
<DialogTitle>Test dialog</DialogTitle>
<DialogContent
sx={{
bgcolor: "#41f1b6"
}}
>
<DialogContentText>
You can set my maximum width and decide if I should adapt or not.
</DialogContentText>
<Box
sx={{
display: "flex",
width: "75%",
height: "100%",
bgcolor: "#ff7782"
}}
>
I need this to fill up the rest of DialogContent
</Box>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Close</Button>
</DialogActions>
</Dialog>
When I implement this code setup, I end up with a layout like the following:
https://i.stack.imgur.com/4k5qn.png
My main issue lies in trying to get the red background color to extend all the way down to meet the green one. Despite experimenting with various height values, I haven't found a solution yet. Although setting the width to 75% works fine.
You can view the corresponding example in this CodeSandbox sandbox