Mui v5: Как создать элемент сетки, который будет использовать 100% высоты доступного диалогового окна ⇐ CSS

[Anonymous]

Я не могу установить высоту элемента сетки так, чтобы она занимала всю доступную высоту пространства содержимого диалогового окна MUI.
На фотографии ниже я хочу, чтобы левая боковая панель, главная и Правая панель расширяется до конца диалогового пространства «оранжевого цвета»


Вот мой код codesandbox.
https://codesandbox.io/p/sandbox/dialog-with-grid -nx5kkc?file=%2Fdemo.js%3A71%2C78
РЕДАКТИРОВАТЬ: я изменил макет на этот ниже, но когда я установите значение xs для второй или третьей части, похоже, не работает.
[img]https:/ /i.sstatic.net/V05sC7Dt.png[/img]

https://codesandbox.io/p/sandbox/dialog ... le=%2Fdemo .js%3A75%2C36
import * as React from "react";
import Button from "@mui/material/Button";
import DialogTitle from "@mui/material/DialogTitle";
import DialogContent from "@mui/material/DialogContent";
import DialogActions from "@mui/material/DialogActions";
import Dialog from "@mui/material/Dialog";
import Grid from "@mui/material/Unstable_Grid2";
import Stack from "@mui/material/Stack";
import Divider from "@mui/material/Divider";
import Container from "@mui/material/Container";
import Box from "@mui/material/Box";

function ConfirmationDialogRaw(props) {
const { onClose, ...other } = props;

return (





{/* ------------------------ */}



{/* ----- */}


1


{/* ----- */}




2




3






{/* --------------------- */}



4








Cancel

Ok


);
}

export default function Demo() {
const [open, setOpen] = React.useState(false);
return (

setOpen(true)}>
Open dialog

setOpen(false)}
/>

);
}


Подробнее здесь: https://stackoverflow.com/questions/784 ... ogs-height