使用 Material-UI 的 Grid 组件，如何让一个单元格占据剩余的水平宽度？

Question

我正在尝试在我的 React 16.13.0 应用程序中使用 material-ui 的 Grid 组件。 我想要一行包含三个项目。 前两项应该只占用他们需要的空间（如果可能的话，我不想硬编码像素值）。 我希望第三个项目占据剩余的水平空间并最远地浮动到 rigth （虽然我发现 React 不喜欢“float: right”作为一种样式）。 我有这个

const styles = (theme) => ({
  root: {
    textAlign: "left",
    margin: theme.spacing(2),
    paddingBottom: theme.spacing(1),
    color: theme.color.secondary,
  },
  cardHeader: {
    paddingBottom: theme.spacing(0),
  },
  cardContent: {
    width: "100%",
    paddingBottom: theme.spacing(1),
  },
  rowBody: {
    width: "100%",
    flexWrap: "nowrap",
    alignItems: "center",
  },
});
...
      <CardContent className={classes.cardContent}>
        <Grid container className={classes.rowBody}>
          <Grid item>
            <img height="20" src={require('../../img/apple.svg')} alt="" />
          </Grid>
          <Grid item>
            {title}
          </Grid>
          <Grid item>
            <InfoIcon />
          </Grid>
        </Grid>

但不幸的是，这使得一切都聚集在一起

如何调整 styles 来做我想做的事？

编辑：这是根据@Mohsen007 给出的答案显示的内容...

Answer 1

按照下面的代码：

rowBody: {
    width: "100%",
    flexWrap: "nowrap",
    alignItems: "center",
    display: "flex",
},

<Grid container className={classes.rowBody}>
     <Grid item>
         <img height="20" src={require('../../img/apple.svg')} alt="" />
     </Grid>
     <Grid item style={{flex: 1,}}>
         {title}
     </Grid>
     <Grid item>
         <InfoIcon />
     </Grid>
</Grid>