ReactBootstrap flexbox不会延伸到内容高度

Question

我无法使此flexbox列的高度等于内容的高度。

当窗口小于576像素时，它会更改，因此每行仅显示一列。但是，当发生这种情况时，其中一列会变大（蓝绿色）。它的高度是父div的一半，但是应该是其内容的高度。如果设置最大高度，则不会重新调整下面的内容，缩小的区域将变为白色。

如果我改变蓝绿色区域的最大高度，则先前覆盖的区域将变为空白。

代码

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 如果我使用更改最大宽度的代码，则其覆盖的区域将变为白色，而浅蓝色的div将保留在其位置

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

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

这里的菜单（茶色）太大

当窗口大于576像素时，它在这里正常工作。

Answer 1

<Menu />组件是否也有来自React Bootstrap的容器？如果是这样，它也可以使用.container类，并且高度为100vh。