Bootstrap React table height to bottom of the screen

I have created a simple website with bootstraps Rows and Cols. The idea is simple: Headline, below left some information and on the right side a pie chart.

In the next row, two tables next to each other. The left table should be interactiv (the user may choose a to view specific data). The right table to display that information.

    return (
      <div>
        <Row>
          <Col>
            <h2>Sparpläne</h2>
          </Col>
        </Row>
        <hr />
        <Row>
          <Col lg={true}>
            Placeholder <br />
            Placeholder <br />
            Placeholder <br />
          </Col>
          <Col lg={true}>{table}</Col>
        </Row>
        <hr />
        <Container fluid>
          <Row>
            <Col>
              <div className="tableFixHead">
                <Table striped bordered hover id="Spraplan-table">
                  <thead>
                    <tr>
                      <th className="large-column">#</th>
                      <th>Sparplan</th>
                      <th>Summe</th>
                      <th className="large-column">Datum</th>
                    </tr>
                  </thead>
                  <tbody>{this.state.tdSparplan}</tbody>
                </Table>
              </div>
            </Col>
            <Col>
              <div className="tableFixHead">
                <Table striped bordered hover>
                  <thead>
                    <tr>
                      <th className="large-column">#</th>
                      <th>Unternehmen</th>
                      <th>Anteil</th>
                      <th className="large-column">Gekauft am</th>
                    </tr>
                  </thead>
                  <tbody>{this.state.tdShares}</tbody>
                </Table>
              </div>
            </Col>
          </Row>
        </Container>
      </div>
    );

It should be kinda responsive. The headline, and the other row with the piechart already take arround half the screen of the available space. I want the table(s) to take the rest of the available space without the need of a vertical scrollbar on the side. The scrollbar should be on the tables. I've tried doing it with the flex method but i guess im doing something wrong.

Here my css:

.tableFixHead          { overflow-y: auto; height: 100%; }
.tableFixHead thead th { position: sticky; top: 0; }

table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }

.selected-row {
  background-color: var(--fa-primary) !important;
}

/* Not Large screens */
@media only screen and (max-width: 992px) {
  .large-column {
    display: none;
  }
}

/* Large Screens */
@media only screen and (min-width: 992px) {

}

I tried wrapping the table in a div, with 100vh which doesnt work. I want it to be page scrolling on small screens but on desktops it should only offer scrollable tables. Hope someone can help me.