我想在页面底部放置一个Box标签。
当前行为：

我想设置文本字段和发送按钮在页面的底部（浏览器和移动的）。我希望将用户消息保留在文本字段框上方。左侧的消息和右侧的消息，就像聊天一样。用户可以滚动聊天但是文本字段和发送按钮应该是固定的.（基本上类似于chatGPT UI）。

import { Box, Button, Container, TextField, Typography } from '@mui/material';
import { useState } from 'react';

import Header from './header';
import Nav from './nav';

const APP_BAR_MOBILE = 64;

const DashboardLayout = () => {
    const [open, setOpen] = useState(false);

    return (
        <Box
            sx={{
                display: 'flex',
                height: '100%',
                overflow: 'hidden',
            }}
        >
            <Nav openNav={open} onCloseNav={() => setOpen(false)} />
            <Header onOpenNav={() => setOpen(true)} />
            <Container>
                <Box
                    sx={{
                        flexGrow: 1,
                        overflow: 'auto',
                        marginTop: `${APP_BAR_MOBILE + 24}px`,
                        backgroundColor: 'pink',
                        height: "100%",
                    }}
                >
                    <Typography variant='h1'>s</Typography>

                    <Box display={"flex"}>
                        <TextField fullWidth size='small' variant='outlined' autoFocus />
                        <Button variant='contained' sx={{ ml: 1 }}>Send</Button>
                    </Box>
                </Box>
            </Container>
        </Box>
    );
};

export default DashboardLayout;

我添加了正文和HTML的CSS到边距和填充0;
public URL = https://stackblitz.com/edit/vitejs-vite-4fja9o?file=src%2Flayouts%2Fdashboard%2Findex.tsx
我尝试添加不同的位置样式和添加网格，但不起作用。