ReactBootstrap flexbox does not stretch to content height

I can't get the height of this flexbox column to be equal to the height of the content.

When the window is less than 576pixels it changes so only 1 column is displayed on each row. But when this happens one of the columns is to large (the teal one). It's height is half of the parent div, but it should be the height of it's content. If I set a max-height it does not readjust the content below and the area that it shrank becomes white.

If I change max-height on the teal area, the area that it covered previously becomes blank.

Code

function App(props) {
  return (
    <div className="App">
      <Container >
        <Row style={{backgroundColor: "orange"}}>
          <Col>
          <Header/>
          </Col>
        </Row>
        <Row style={{flex: 1}}>
          <Col md={2} className="menuClass" style={{backgroundColor: "teal"}}>
            <Menu />
          </Col>
          <Col md={10} style={{backgroundColor: "lightblue"}}>
            <p className="abc">abc</p>
            <Content />
          </Col>
        </Row>
        <Row>
          <Col style={{backgroundColor: "darkgreen"}}>
            <Footer />
          </Col>
        </Row>
      </Container>
    </div>
  );
}

CSS If I use the code that changes max-width, the area it covered becomes white and lightblue div remains in it's place

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

@media (max-width: 570px) {
  .abc {
      max-width: 200px;
  }
}

Here the menu(teal color) is too big

Here it is working properly when window is larger than 576 pixels.