语义UI反应：使表具有容器的高度

Question

我在<Table>内有一个<Grid>。网格的间距正常。但是，表似乎并不关心和溢出： 给桌子一个高度似乎根本不会影响它。

我希望Table永远不会离开Grid分配给它的空间。如果表太大，Table.Body应该滚动。

我正在使用Semantic UI React。

这是我目前的代码：

<Grid style={{"height": "90vh"}}>
  <Grid.Row style={{"height": "50%"}}>
    <Grid.Column width={8}>
      <Table striped style={{"height": "500px", "overflow": "scroll"}}>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell style={{"fontSize": "32px", "textAlign": "center"}}>TABLE 1</Table.HeaderCell>
          </Table.Row>
        </Table.Header>
        <Table.Body style={{"overflow": "scroll"}}>
          <Table.Row>
            <Table.Cell>
              <p style={{"fontSize": "25px", "display": "inline"}}>There would be more of me, but for simplicity's sake it's just me!</p>
            </Table.Cell>
          </Table.Row>
        </Table.Body>
      </Table>
    </Grid.Column>
    <Grid.Column width={8}>
      (another table would go here. This is the table that blocks table 1 in the picture above)
    </Grid.Column>
  </Grid.Row>

  <Grid.Row style={{"height": "50%"}}>
    <Grid.Column width={8}>
      (another table would go here)
    </Grid.Column>
    <Grid.Column width={8}>
      (another table would go here)
    </Grid.Column>
  </Grid.Row>
</Grid>