MUI：如何使一个框具有固定高度，而另一个框占据剩余宽度并带有可滚动内容

Question

所以“height: 'calc(100% - 170px)'”技巧可以正常工作，但如果我知道标题的高度就可以了。如果我不知道标题的 H，我怎么能这样划分我的视图框。

很明显每个人都需要这个，但我找不到答案。

  <Box sx={{ height: "98vh" }}>

            <Box sx={{ width: '100%', height: '170px', backgroundColor: '#aabbbb' }}
            >
                APPBAR
            </Box>
            <Box
                sx={{
                    width: '100%',
                    height: 'calc(100% - 170px)',
                    overflow: 'auto'
                }}
            >
                <Card sx={{ height: '2000px', backgroundColor: 'lightgreen' }}>
                    <CardContent>LIST</CardContent>
                </Card>
            </Box>
        </Box>

所以我尝试了 flexboxes 的所有变体，但它们适用于固定内容。如果我有灵活的高度，它就不会像我预期的那样工作。应该有一些东西告诉盒子“给我剩余的视口高度”

Answer 1

好吧，我终于找到解决方案了：

 <Box sx={{ height: '98vh', display:'flex', flexDirection:'column' }}>

        <Box sx={{ 
            width: '100%',
             height: '100px',
             backgroundColor: '#aabbbb' }}
        >
            APPBAR
        </Box>
        <Box
            sx={{
                width: '100%',                   
                overflow: 'auto',
                flex:1
            }}
        >
            <Card sx={{ height: '2000px', backgroundColor: 'lightgreen' }}>
                <CardContent>LIST</CardContent>
            </Card>
        </Box>
    </Box>