Html ReactBootstrap flexbox不会拉伸到内容高度
我无法使此flexbox列的高度等于内容的高度 当窗口小于576像素时,它会发生变化,因此每行仅显示一列。但当这种情况发生时,其中一根柱子太大了(青绿色的那根)。它的高度是父div的一半,但它应该是其内容的高度。如果我设置了最大高度,它不会重新调整下面的内容,它收缩的区域将变为白色 如果我更改了teal区域上的“最大高度”,则先前覆盖的区域将变为空白 代码Html ReactBootstrap flexbox不会拉伸到内容高度,html,css,reactjs,bootstrap-4,react-bootstrap,Html,Css,Reactjs,Bootstrap 4,React Bootstrap,我无法使此flexbox列的高度等于内容的高度 当窗口小于576像素时,它会发生变化,因此每行仅显示一列。但当这种情况发生时,其中一根柱子太大了(青绿色的那根)。它的高度是父div的一半,但它应该是其内容的高度。如果我设置了最大高度,它不会重新调整下面的内容,它收缩的区域将变为白色 如果我更改了teal区域上的“最大高度”,则先前覆盖的区域将变为空白 代码 function App(props) { return ( <div className="App"
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>
);
}
这里的菜单(青色)太大了
在这里,当窗口大于576像素时,它工作正常。
组件是否也有来自React引导的容器?如果是这样,它还可以拾取.container
类,高度为100vh
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
@media (max-width: 570px) {
.abc {
max-width: 200px;
}
}