max-height 100% overflowing parent

Question

I have a list-group using bootstrap, with a lot of items in it. I applied the following css rules to the id of my 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 this div is wrapped in a couple of other divs, as shown below.

how do I make my listgroup not overflow my #body-content-menu div who has the following css rules, while still allowing this to be responsive.

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

Answer 1

Firstly you must have a jquery link in you page(Maybe bootstrap add it to your page). Then you need to set an id for div class="row" for example id="row and another id for div class="col-lg-12" for 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>