Material UI Stack组件flex布局显示异常 多余空白如何修复

使用Stack组件搭配iframe实现编辑器、预览区并排布局时，出现半屏空白、内容无法铺满的异常，效果如下：

问题根因 #

布局异常由3处配置错误直接导致：

• 预览区容器宽度配置错误：原代码写为width: 'calc(50% - 1024px)'，1024px的固定减项会让容器宽度计算结果远小于预期，直接留出大面积空白
• 横向排列的父级Stack未设置明确高度，子元素配置的height: 100%无法正确继承高度基准，导致高度塌陷
• 桌面端预览区的iframe未设置宽度100%，无法撑满父容器

修复后代码 #

直接替换原有对应代码即可：

<Stack sx={{ bgcolor: 'white', pt: 1 }}>
  <TabContext value={value} >
    <Box sx={{ borderBottom: 1, borderColor: 'divider', bgcolor: 'white' }}>
      <TabList onChange={handleChange} >
        <Tab label="HTML" value="1" />
        <Tab label="CSS" value="2" />
        <Tab label="JS" value="3" />
        <Tab label="Output" value="4" sx={{ display: { xs: 'block', md: 'none' }, mt: 1 }} />
      </TabList>
    </Box>

    {value === '4' ?
      <Stack sx={{ height: 'calc(100vh - 201px)' }}>
        <iframe title="result"
          sandbox="allow-scripts"
          frameBorder="0"
          width="100%"
          srcDoc={iframeDisplay}
        />
      </Stack>
      :
      <Stack direction="row" sx={{ width: '100%', height: 'calc(100vh - 201px)', position: 'relative'}}>
        <Stack sx={{ width: { xs: '100%', md: '50%' }, bgcolor: "white", height: '100%' }}>
          <TabPanel value={value} sx={{ p: 0, height: '100%' }}>
            <CodeMirror
              value={codeEditor.value}
              height={CODE_EDITOR_PROPS.height}
              theme={CODE_EDITOR_PROPS.theme}
              extensions={codeEditor.extensions}
              onChange={onChange}
            />
          </TabPanel>
        </Stack>
        <Box sx={{ display: { xs: 'none', md:'block' }, height: '100%', width: '50%'}}>
          <iframe
            title="result"
            frameBorder="0"
            width="100%"
            height="100%"
            srcDoc={iframeDisplay}
          />
        </Box>
      </Stack>}
  </TabContext>
</Stack>

修改点说明 #

• 移除预览区宽度计算中错误的- 1024px逻辑，直接设置为50%宽度，和左侧编辑区等宽
• 给横向排列的父Stack设置明确高度calc(100vh - 201px)，和移动端全屏预览逻辑高度保持一致，子元素高度改为100%继承父级高度即可，无需重复计算视口高度
• 给预览区iframe添加width: "100%"配置，保证撑满父容器
• 将预览区Box的display: flex改为display: block，避免flex布局下iframe默认尺寸异常

可选优化 #

如果不想手动维护50%宽度，可以利用Stack的flex弹性特性，去掉左右栏的宽度配置，给两个容器都添加sx={{ flex: 1 }}，组件会自动分配等宽空间，适配不同屏幕尺寸时更灵活，不需要手动调整宽度比例。

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