My struggle is with getting the height of this flexbox column to match that of its content.
When the window width is less than 576 pixels, only one column is displayed per row. However, in this scenario, one of the columns (the teal one) ends up being too large. Its height is only half of the parent div's height when it should be equal to the height of its content. Setting a max-height does not adjust the content below properly, resulting in blank space appearing.
Adjusting the max-height property on the teal area causes the previously covered area to turn 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 Changing the max-width property affects the layout by creating white space and causing the lightblue div to remain in place
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
@media (max-width: 570px) {
.abc {
max-width: 200px;
}
}
The teal menu appears disproportionately large here:
https://i.sstatic.net/h6DTq.png
Proper functionality can be seen when the window width exceeds 576 pixels: https://i.sstatic.net/dzmNs.png