Semantic UI React模态框右侧如何适配左侧视频高度免硬编码实现滚动

问题背景 #

我正在使用Semantic UI React，想要实现纵向分为两部分的模态框：左侧展示视频，右侧展示视频的时间戳和索引描述，右侧的索引列表需要支持滚动。

原有实现代码：

<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>

上述代码实现了预期的UI，但需要给右侧网格列设置硬编码的高度值，否则无法实现滚动效果。尝试过使用百分比数值，但会导致右侧高度与左侧不一致。

需求：不使用硬编码的情况下，让右侧高度与左侧网格列的高度保持一致。

当前UI效果：

解决方案 #

通过给flex布局搭配position属性实现自适应高度，修改后代码如下：

<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>

注意事项 #

右侧容器标签设置了relative的CSS position属性，右侧内部列表元素设置了absolute的position属性，不添加position属性的话flex布局无法生效。

内容的提问来源于stack exchange，提问作者leoOrion