Set div height between two divs - css

Question

I am trying to get a div height take the remaining space between two divs.
<div id='company_col' class='contact_columns'>
<div id='company_title' class ='col_title'>
<h3>Company</h3>
</div>
<hr>
<div id='company_list' class='contact_lists'>
</div>
<div id='company_edit_bar' class='edit_bar'>
<div id='company_add_btn' class='edit_btn'>
<i class='fa fa-plus' aria-hidden='true'></i>
</div>
<div id='company_delete_btn' class='edit_btn'>
<i class='fa fa-minus' aria-hidden='true'></i>
</div>
</div>
Here is the JS Fiddle: https://jsfiddle.net/xqLpqsdk/
I need to make .contact_lists to fill the space between .col_title and .edit_bar so the scroll bar is only displayed between those 2 divs
I've tried making .contact_lists position absolute but that didn't work.

Answer 1

If I am not wrong this will solve your issue. Please take a look at this,
#contact_editor_wrapper {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
z-index: 10000;
}
#contact_editor {
display: block;
position: absolute;
width: 100%;
max-width: 1400px;
height: 100%;
min-height: 400px;
max-height: 800px;
background-color: #99AFC5;
border: solid 1px black;
border-radius: 10px;
margin: 0 auto;
padding: 2.5px 5px;
}
#x_contact_editor {
display: inline-block;
position: absolute;
right: 5px;
cursor: pointer;
}
.contact_editor_row {
margin: .5% 0;
}
#contact_editor_title_wrapper {
display: block;
width: 100%;
height: 4%;
}
#contact_editor_title {
padding: 6px 0;
text-align: center;
font-size: 20px;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
}
#contact_columns {
display: flex;
height: 89%;
width: 100%;
flex-direction: row;
justify-content: center;
}
.contact_columns {
display: flex;
flex-flow: column;
height: 100%;
background-color: white;
margin: 0 .25%;
border: 1px solid black;
border-radius: 5px;
overflow: hidden;
}
#type_col {
width: 14.5%;
}
#company_col {
width: 42%;
}
#contact_col {
width: 42%
}
#contact_editor_btns {
display: block;
width: 100%;
height: 4%;
}
.col_title {
display: block;
text-align: center;
width: 100%;
height: auto;
margin-top: 9px;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
border-bottom: 1px solid black;
}
.contact_lists {
position: relative;
height: 100%;
overflow-y: scroll;
}
.edit_bar {
display: block;
//position: absolute;
bottom: 0;
width: 100%;
height: auto;
border-top: 1px solid black;
border-radius: 0 0 5px 5px;
background-color: #00162C;
}
.edit_btn {
color: white;
display: inline-block;
height: 100%;
margin: 0;
padding: 0;
border-right: 1px solid black;
transition: all .5s ease;
}
.edit_btn:hover {
background-color: #99AFC5;
transition: all .5s ease;
}
.edit_btn i {
margin: 4px 8px;
}
#company_delete_btn, #contact_delete_btn {
margin-left: -2.5px;
}
<div id='contact_editor_wrapper' class='hide_contact_editor'>
<div id='contact_editor'>
<div id='x_contact_editor'>
<i class='fa fa-times' aria-hidden='true'></i>
</div>
<div id='contact_editor_title_wrapper' class='contact_editor_row'>
<div id='contact_editor_title'>Contact Editor</div>
</div>
<div id='contact_columns' class='contact_editor_row'>
<div id='type_col' class='contact_columns'>
<div id='type_title' class ='col_title'>
<h3>Type</h3>
</div>
<hr>
<div id='type_list' class='contact_lists'>
</div>
</div>
<div id='company_col' class='contact_columns'>
<div id='company_title' class ='col_title'>
<h3>Company</h3>
</div>
<hr>
<div id='company_list' class='contact_lists'>
</div>
<div id='company_edit_bar' class='edit_bar'>
<div id='company_add_btn' class='edit_btn'>
<i class='fa fa-plus' aria-hidden='true'></i>
</div>
<div id='company_delete_btn' class='edit_btn'>
<i class='fa fa-minus' aria-hidden='true'></i>
</div>
</div>
</div>
<div id='contact_col' class='contact_columns'>
<div id='contact_title' class ='col_title'>
<h3>Contact</h3>
</div>
<hr>
<div id='contact_list' class='contact_lists'>
</div>
<div id='contact_edit_bar' class='edit_bar'>
<div id='contact_add_btn' class='edit_btn'>
<i class='fa fa-plus' aria-hidden='true'></i>
</div>
<div id='contact_delete_btn' class='edit_btn'>
<i class='fa fa-minus' aria-hidden='true'></i>
</div>
</div>
</div>
</div>
<div id='contact_editor_btns' class='contact_editor_row'>
</div>
</div>
</div>