Material UI Grid 组件将第二列填充到容器末尾答案

【问题标题】：Material UI Grid component Fill second column to end of containerMaterial UI Grid 组件将第二列填充到容器末尾
【发布时间】：2019-01-24 18:20:06
【问题描述】：

我正在使用材质 UI 的 Grid 组件并在第一列中使用 auto 属性

所以我有

<Grid container className={classes.borderclass}>
   <Grid item xs={"auto"}>
      <Items />
    </Grid>
   <Grid item xs={10}>
      <Content />
  </Grid>
</Grid>

但是，这不会填满整个容器，但我似乎没有看到剩余尺寸的选项。我已经研究了 css calc 选项，但是我没有看到一种方法来获取 auto 列的大小以与 div 进行比较

任何建议，即使它不是重要的用户界面，我们都将不胜感激。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

如果您查看 Material-UI 演示，他们有一个工作示例，显示了 auto 属性的作用。因此，正如here 所描述的示例，您不需要指定auto 关键字。这样做：

<Grid container className={classes.borderclass}>
   <Grid item xs>
      <Items />
    </Grid>
   <Grid item xs={10}>
      <Content />
  </Grid>
</Grid>

【讨论】：