CSS make div fill remaining space of parent element

how can I make a div fills the remaining space (height) of the parent? Here are my code snippets: html

<div id="mainWrapper">
        <div id="header">...
        </div>
        <div id="contentWrapper">
            <div id="content">
            </div>
        </div>

</div>

css

#mainWrapper
{
    width: 900px;
    height: 100vh;
    margin-left: auto;
    margin-right:auto;
    padding-top:100px
}
#header{
    height:456px;
}
#contentWrapper{
    background-color:black;
    padding: 30px;
    overflow: auto;
    height:100%;
}

The contentWrapper should fill all the ramining space below the header. Large content should be scrollable and not change contentWrappers height. I tried a lot what I found on google but nothing helped me, yet.. Is there a solution using pure css or do I have to use JS instead?

regards