如何让容器内的MUI元素延伸至浏览器窗口边缘

要让第二个Box突破MUI容器限制延伸到窗口右侧，同时保留第一个Box在容器内，可以用容器相对定位+第二个Box绝对定位的方式解决，核心是利用视口单位和定位特性脱离容器约束。直接上实现代码：

import { Container, Box, Grid } from '@mui/material';

export default function Demo() {
  return (
    <Container sx={{ position: 'relative', border: '1px solid #ccc', py: 2 }}>
      {/* 用Grid替代Stack，避免flex布局干扰绝对定位元素 */}
      <Grid container spacing={2}>
        {/* Box1：留在容器内，占容器宽度的50% */}
        <Box sx={{ width: '50%', bgColor: '#e3f2fd', p: 2 }}>
          Box1 - 内容仅在容器范围内显示
        </Box>
        {/* Box2：突破容器，延伸至窗口右侧，占视口宽度的50% */}
        <Box 
          sx={{ 
            position: 'absolute', 
            right: 0, 
            top: 0, 
            width: '50vw', 
            bgColor: '#ffebee', 
            p: 2,
            height: '100%' // 可选：让Box2高度和容器保持一致
          }}
        >
          Box2 - 延伸至窗口右侧，内容只受自身盒子限制
        </Box>
      </Grid>
    </Container>
  );
}

核心设置解析 #

• 给Container添加position: relative：让内部绝对定位的Box2以容器为定位基准，确保两者顶部对齐。
• Box2使用position: absolute+right: 0：脱离文档流，直接紧贴窗口右侧，完全不受容器宽度约束。
• Box2宽度设为50vw：vw是视口宽度单位，50vw刚好占浏览器窗口宽度的一半，满足需求。
• 用Grid替代Stack：Stack的flex布局会给子元素默认添加flex属性，容易和绝对定位逻辑冲突，Grid更适配这种混合布局场景。

可选调整 #

• 若需要Box2高度与容器完全匹配，保留height: '100%'即可；
• 若担心Box1内容被Box2遮挡，可给Box1添加z-index: 1（默认绝对定位元素层级更高，按需调整）。

内容的提问来源于stack exchange，提问作者Citrus