Make div fill height but not extend it (use scrollbar for overflow)

I have a specific layout that I want to achieve on my web page, namely: 

The layout in the above image is built with 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, when there is too much content in the purple part, the component starts to increase in height. I wish to prevent that and have a scrollbar in the purple component.

Furthermore, I heard that some flex properties work different in Chrome and Firefox. The idea is that I want my web page to have the same behavior in both browsers.

#html #css #css3 #bootstrap