我正在尝试使用MaterialUI Grid组件和字段来构造以下表单布局：

+-----------------------------------------+
|Form                                     |
|                                         |
| +--------------+ +----------------+     |
| |Field_1       | |Field_2         |     |
| +--------------+ +----------------+     |
| +--------------+ +---------+ +--------+ |
| |TextArea      | |Popup_A1 | |Popup_A2| |
| |              | +---------+ +--------+ |
| |              | +---------+ +--------+ |
| |              | |Popup_B1 | |Popup_B2| |
| |              | +---------+ +--------+ |
| |              | +---------+ +--------+ |
| |              | |Popup_C1 | |Popup_C2| |
| |              | +---------+ +--------+ |
| |              |                        |
| +--------------+                        |
+-----------------------------------------+

我的理解可能有些奇怪，并且弹出窗口显示为最小正方形。页面结构如下所示（简化）：

<Form>
  <Grid container direction="row" justify="flex-start" alignItems="flex-start" spacing={1}>
    <Grid container xs="12" spacing="1">
      <Grid item xs={12} sm={6}>
        <Field name="Field1" ... fullWidth />
      </Grid>
      <Grid item xs={12} sm={6}>
        <Field name="Field2" ... fullWidth />
      </Grid>
    </Grid>
    <Grid container xs={12} >
      <Grid container xs={4} sm={4} >
        <Field  fullWidth multiline component={TextField} />
      </Grid>

      <Grid container xs={8} sm={8}>
        <Grid container >
          <Grid item>
            <TextField name="Popup_A1" fullWidth select>
              <MenuItem key="1" value="1">
                Large Text
              </MenuItem>
              <MenuItem key="2" value="2">
                Ooh Some Large Text
              </MenuItem>
              <MenuItem key="3" value="3">
                Another Large Text Choice
              </MenuItem>
              <MenuItem key="4" value="4">
                No, LOOOONG Text
              </MenuItem>
            </TextField>
          </Grid>
          <Grid item>
            <TextField name="Popup_A2" fullWidth select>
              <MenuItem key="1" value="1">
                Large Text
              </MenuItem>
              <MenuItem key="2" value="2">
                Ooh Some Large Text
              </MenuItem>
              <MenuItem key="3" value="3">
                Another Large Text Choice
              </MenuItem>
              <MenuItem key="4" value="4">
                No, LOOOONG Text
              </MenuItem>
            </TextField>
          </Grid>
        </Grid>
      </Grid>

      <Grid container xs={8} sm={8}>
        <Grid container >
          <Grid item>
            <Field name="Popup_B1" ... fullWidth select >....</Field>
          </Grid>
          <Grid item>
            <Field name="Popup_B2" ... fullWidth select >....</Field>
          </Grid>
        </Grid>
      </Grid>

      ...

    </Grid>
 </Grid>
</Form>

有人可以让我摆脱困境，让我知道我在做错什么，还是可以将我指向构建这样的表单的资源？

编辑

我在MenuItemVenkovsky中添加了非常有用的代码沙箱中的元素...它恰好说明了我的意思。弹出窗口非常非常狭窄。:-(