Set height of right hand side using height of left hand side

Question

I am using semanti-UI-react. The Ui I want to achieve is a modal which is divided vertically in 2 parts. The left side shows a video and the right shows timestamps and descriptions of indices of the video. My right side with the indices should be scrollable.

            <Grid>
              <Grid.Row>
                <Grid.Column style={{margin: '0', padding: '0'}} computer={10} mobile={16} table={16} >
                  <Segment raised inverted style={{ padding: '2.5rem 0'}}>
                    <ReactPlayer style={{margin: '0 auto'}} ref={this.ref} url={this.state.url} controls={true} playing={true}/>
                  </Segment>
                </Grid.Column>
                <Grid.Column style={{margin: '0', padding: '0'}} computer={6} mobile={16} table={16}>
                  <Segment basic style={{overflowX: 'hidden', margin: '0 auto', height: '450px'}}>
                    <List relaxed>
                      {_.keys(this.props.videoMeta.timestamps).map(ts => (
                        <List.Item className='clickable' onClick={() => this.forward(this.props.videoMeta.timestamps[ts])}>
                          <List.Icon name='video' size='fullscreen' verticalAlign='middle'/>
                          <List.Content>
                            <List.Header style={{textTransform: 'capitalize'}}>{ts}</List.Header>
                            <List.Description>{this.props.videoMeta.timestamps[ts]}</List.Description>
                          </List.Content>
                        </List.Item>
                      ))}
                    </List>
                  </Segment>
                </Grid.Column>
              </Grid.Row>
            </Grid>

This achieves the above mentioned UI. But I had to set a hardcoded height value to my right hand side grid column. If I dont set it, its not scrollable. I tried percentage values but that makes my right hand side a different height from left hand side height.

Instead of hardcoding, how do I set the height to my left hand side grid column ?

A screenshot of my UI right now:

Edit:

Adding to the answer below. I had previosly tried the same display flex idea but it did not work. One thing I added from the answer below was the css position property that fixed the display flex.

My code looks like this now -

             <Grid>
              <Grid.Row style={{display: 'flex'}}>
                <Grid.Column style={{margin: '0', padding: '0'}} computer={10} mobile={16} table={16}>
                  <Segment raised inverted style={{padding: '2.5rem 0'}}>
                    <ReactPlayer style={{margin: '0 auto'}} ref={this.ref} url={this.state.videoMeta.link} controls={true} playing={true}/>
                  </Segment>
                </Grid.Column>
                <Grid.Column style={{margin: '0', padding: '0', overflowX: 'hidden', position: 'relative', flexGrow: 1}} computer={6} mobile={16} table={16}>
                  <Segment basic>
                    <Header><strong>Timestamps:</strong>  </Header>
                    <List relaxed style={{position: 'absolute'}}>
                      {_.keys(this.state.videoMeta.timestamps).map(ts => (
                        <List.Item className='clickable' onClick={() => this.forward(this.state.videoMeta.timestamps[ts])}>
                          <List.Icon name='video' size='fullscreen' verticalAlign='middle'/>
                          <List.Content>
                            <List.Header style={{textTransform: 'capitalize'}}>{ts}</List.Header>
                            <List.Description>{this.state.videoMeta.timestamps[ts]}</List.Description>
                          </List.Content>
                        </List.Item>
                      ))}
                    </List>
                  </Segment>
                </Grid.Column>
              </Grid.Row>
            </Grid>

Note the css properties of position relative for the container tag and the postion absolute for the inner element on the right hand side. Without the position property the display flex did not work.

Answer 1

I don't have experience with react or semantic-ui, but you can do this in css using flexbox and some clever positioning. Here is a simple example that you should hopefully be able to adapt to your own code. The content in the left column is a fixed size, and the right column will be the same height, scrolling if it's too tall.

.container {
  display: flex;
}

.right-col {
  overflow-y: auto;
  flex-grow: 1;
  position: relative;
}

.right-col ul {
  position: absolute;
}

/* -- The following css is just for demo purposes: -- */
.content {
  height: 100px;
  width: 200px;
  background-color: purple;
}
.container {
  border: 2px solid black;
}
.left-col {
  border: 2px solid blue;
}
.right-col {
  border: 2px solid green;
}

<div class="container">
  <div class="left-col">
    <div class="content"></div>
  </div>
  
  <div class="right-col">
    <ul>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </div>
</div>