how to make the first block the same height as the second block?

Question

How to make the first grid item the same height as the second grid item?

    <Grid container spacing={2}>
      <Grid item xs={6}>
        <div>
          {[...Array(20).keys()].map(item => (
            <div style={styles.container}>{item}</div>
          ))}
        </div>
      </Grid>
      <Grid item xs={6}>
        <div
          style={{
            height: Math.floor(Math.random() * 500 + 50),
            ...styles.container
          }}
        />
      </Grid>
    </Grid>

Codesandbox example https://codesandbox.io/s/st-of-grid-stretch-sscuj

Should look like this

Gowtham V · Answer 1 · 2019-12-17T05:23:40.310

0

I just now understand your question. Use this code and try

 <Grid container spacing={2}  style={{
      height: Math.floor(Math.random() * 500 + 50)
    }}>
      <Grid item xs={6} alignItems="stretch" style={{ height : '100%',overflow : 'auto' }}>
        <div >
          {[...Array(20).keys()].map(item => (
            <div style={styles.container}>{item}</div>
          ))}
        </div>
      </Grid>
      <Grid item xs={6}>
        <div
          style={{
            height: '100%',
            ...styles.container
          }}
        />
      </Grid>
    </Grid>

edited Dec 17 '19 at 05:23

answered Dec 16 '19 at 14:26

Gowtham V

27
6

It doesn't work. the main container will be the same height as the first grid item – Dec 16 '19 at 15:01
I just want to adopt the first column height to the second column. And the second column may have different heights and the first column should be the same height as the second – Dec 17 '19 at 06:38
In Material UI uses flex. Hence you should dynamic height in parent, then only child would have same height.Hope it helps you – Gowtham V Dec 17 '19 at 07:07
Check this https://stackoverflow.com/a/32658882/12397771 answer. then set height of child element to parent – Gowtham V Dec 17 '19 at 07:10
Thanks. I know that material-ui uses flex. But I'm searching for solutions when the first column should be the same height as the second column(not container). – Dec 17 '19 at 07:46

score 0 · Accepted Answer · answered Dec 17 '19 at 10:35

I solved it using react ref

class App extends Component {
  constructor(props) {
    super(props);

    this.secondColumnRef = React.createRef();

    this.state = {
      height: ""
    };
  }

  componentDidMount() {
    if (this.secondColumnRef && this.secondColumnRef.current) {
      this.setState({
        height: this.secondColumnRef.current.offsetHeight
      });
    }
  }

  render() {
    return (
      <Grid container spacing={2}>
        <Grid item xs={6}>
          <div
            style={{
              height: this.state.height,
              overflow: "auto"
            }}
          >
            {[...Array(20).keys()].map(item => (
              <div style={styles.container}>{item}</div>
            ))}
          </div>
        </Grid>
        <Grid item xs={6}>
          <div
            ref={this.secondColumnRef}
            style={{
              height,
              ...styles.container
            }}
          />
        </Grid>
      </Grid>
    );
  }
}

how to make the first block the same height as the second block?

2 Answers2