CSS使div填充父元素的剩余空间

Question

我想让div填充父元素的剩余空间。

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%;
}

contentWrapper应填充标题下方的所有剩余空格。大内容应为scrollable，而不是更改contentWrappers高度。

是否有使用纯css的解决方案或我是否必须使用JS？

问候