I am looking to achieve a specific layout for my webpage, as shown in the image below:
The layout depicted in the image above is created using the following HTML and bootstrap classes:
<div className="ContentWrapper d-flex mh-100 flex-row h-100">
<div className="ContentBody flex-column flex-fill">
<div className="ContentHeader p-3 w-100">
<h2>Header</h2>
</div>
<div className="ContentMain w-100">
<h2>Scrollable div, should fill height, but not more than that</h2>
</div>
</div>
<div className="Sidebar h-100">
<h2>Sidebar content</h2>
</div>
</div>
Relevant CSS:
.ContentWrapper {
background-color: red;
}
.ContentBody {
background-color: blue;
}
.ContentHeader {
background-color: yellow;
}
.ContentMain {
background-color: purple;
flex: 1;
}
.Sidebar {
background-color: green;
width: 500px;
}
However, I am facing an issue where the purple section's height keeps increasing when there is too much content, and I would like to add a scrollbar to that component to control the height.
Additionally, I have heard that some flex properties behave differently in Chrome and Firefox. I want to ensure that my webpage functions consistently across both browsers.