html - max-height 100% overflowing parent -

i have list-group using bootstrap, lot of items in it. applied following css rules id of list-group div.

#my-listgroup {     margin-top: 20px;     border-radius: 6px;     overflow-y: scroll;     max-height: 100%;     max-width: 100%;     width: auto;     height: auto; } 

now div wrapped in couple of other divs, shown below.

how make listgroup not overflow #body-content-menu div has following css rules, while still allowing responsive.

#body-content-menu {     border-radius: 10px;     height: 100%;     background-color: #b21e15;     padding-bottom: 20px; } 

firstly must have jquery link in page(maybe bootstrap add page). need set id div class="row" example id="row , id div class="col-lg-12" example id="col".

now:

var realheight = $('#col').height() - $('#row').height(); $('#my-listgroup').css('height', realheight + 'px'); 

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>  <div id="col" style="height:100px;background-color:red;margin:100px;">  	<div id="row" style="height:40px;">div row</div>  	<select id="my-listgroup" size="4" name="ctl02" style="max-height: 100%;">  	  	<option value="item">item</option>  	<option value="item">item</option>  	<option value="item">item</option>  	<option value="item">item</option>  	<option value="item">item</option>  	<option value="item">item</option>    </select></div>  <script>    var realheight = $('#col').height() - $('#row').height();      $('#my-listgroup').css('height', realheight + 'px');  </script>