Блог

Я не могу сделать высоту этого столбца flexbox равной высоте содержимого.

Когда размер окна меньше 576 пикселей, он изменяется, поэтому в каждой строке отображается только 1 столбец. Но когда это происходит, один из столбцов становится слишком большим (бирюзовый). Его высота составляет половину родительского div, но она должна быть высотой его содержимого. Если я установлю максимальную высоту, это не скорректирует содержимое ниже, и область, которую он уменьшил, станет белой.

Если я изменю максимальную высоту в области teal, область, которую она покрывала ранее, станет пустой.

Код

 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 пикселей.

Есть ли у <Menu /> компонента также контейнер из React Bootstrap? Если это так, он также мог бы подобрать .container класс и иметь высоту 100 вч.