Getting A Scrollable Child Div To Vertically Fill The Remainder Of Its Parent Dynamically

I'm trying to get a child div (.form) with a variable height to use overflow: scroll when its contents expand too much. The .card should be dynamic and always be the height of the

Solution 1:

I'm sorry I didn't get this to you last night, but it was a long day. I took direction from Michael_B and made it work without JavaScript by using a table. This isn't a recommended method moving into the future. tables are meant to render data, not format a page (though I do miss those days).

html, body, body > table {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #ffa500;
}

.card-holder {
    position: relative;
    height: 50%;
    background-color: #ffffff;
}

.card {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
}

.card > div {
    margin: 0 auto;
    width: 320px;
}

.tab, .bottom {
    padding: 18px16px;
    text-align: center;
    border: 1px solid black;
}

.form-wrapper {
    overflow: auto;
    height: 100%;
}

.form > * > div {
    padding: 16px;
}

<table><tr><tdclass="card-holder"><divclass="card"><divclass="tab">This is a tab</div><divclass="form"><divclass="form-wrapper"><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div>this and all the input tags above this should be inside .card and a scrollable div (inside the white background)</div></div></div><divclass="bottom">This should be inside .card but outside the form. Just below the white background</div></div></td></tr><tr><tdclass="card-holder"><divclass="card"><divclass="tab">This is a tab</div><divclass="form"><divclass="form-wrapper"><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div><inputtype="text" /></div><div>this and all the input tags above this should be inside .card and a scrollable div (inside the white background)</div></div></div><divclass="bottom">This should be inside .card but outside the form. Just below the white background</div></div></td></tr></table>

I closed the input elements, also. Be aware that all elements should be closed. For those elements that don't require a separate closing tab, simply add / before you close the tag up, <input> becomes <input />. It won't prevent most browsers from properly rendering, but it's good practice because other languages are not so nice.