React Bootstrap flexbox 不会拉伸到内容高度

Posted 2023-03-05

【中文标题】React Bootstrap flexbox 不会拉伸到内容高度

【英文标题】：ReactBootstrap flexbox does not stretch to content height

【发布时间】：2020-12-05 09:17:26

【问题描述】：

我无法让这个 flexbox 列的高度等于内容的高度。

当窗口小于 576 像素时，它会发生变化，因此每行仅显示 1 列。但是当这种情况发生时，其中一列太大（蓝绿色）。它的高度是父 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 像素时，它可以正常工作。

【参考方案1】：

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