reactjs - 将右侧网格大小与左侧动态网格的总高度对齐

Question

我正在处理这段代码：

demo.js

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },
  paper2: {
    height: "100%",
    padding: theme.spacing(2),
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },
}));

export default function FullWidthGrid() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Grid container spacing={3}>
        <Grid item xs={12}>
          <Paper className={classes.paper}>xs=12</Paper>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
        </Grid>
        <Grid item xs={12} sm={6} >
          <Paper className={classes.paper2}>xs=12 sm=6</Paper>
        </Grid>        
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=6</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=6</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
      </Grid>
    </div>
  );
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Demo from './demo';

ReactDOM.render(<Demo />, document.querySelector('#root'));

但是我得到了框布局的以下格式：

(1) 有没有办法使右网格不与底行的框重叠？

(2) 我需要右侧的框与左侧的网格总数相同高度，其数量是动态的。

标签： reactjsflexboxmaterial-ui

Answer 1

添加box-sizing: border-box到.paper2：

paper2: {
  height: "100%",
  padding: theme.spacing(2),
  textAlign: 'center',
  color: theme.palette.text.secondary,
  boxSizing: 'border-box'
}

演示：