react-bootstrap row fill all available space

Question

I need stretch row to the start of footer. Bootstrap has class h-100, but it doesn't work in my case and I don't know why.
I'm new in frontend, but I all examples on the internet didn't help me(

<div className="App">
  <header>
    <h1>App</h1>
  </header>
  <main>
    <Container fluid>
      <Row className="h-100">
        <Col xs={2} className="ml-0 bg-secondary">
          <Sidebar />
        </Col>
        <Col className="p-1 p-md-4">
          <AnotherComponent />
        </Col>
      </Row>
    </Container>
  </main>
  <footer>
    <p>
      Footer text
    </p>
  </footer>
</div>

Result:

Upd: after adding vh-100 class to the Container

Upd: make position relative Main screen: After scrolling:

Answer 1

Try to give full view height to your container directly

 <Container className="vh-100 d-flex flex-column "> 
       <Row className="h-100">
  ......