Trying to achieve a div that has an auto max height so that when the list within the div is really long, it does not force the entire page to scroll, but instead extends its height to as far low as it can without making the page scroll, and have a scrollbar within the div itself. Currently, it is set with max-height of 800px. This should be autoset depending in browser viewport resolution. 

<http://plnkr.co/edit/vt2tvVAErdpmPRkg1txd?p=preview>

```
<body>
<div class="container">
<div class="row">
    <div class="col-md-8">
 <div class="panel panel-body panel-primary">
 MainContent
 </div>
   </div> <!-- /.col-md-8 -->
    <div class="col-md-4">
            <div data-spy="affix">
           some list here
            <div style="max-height:800px;
overflow-y: auto; overflow-x: hidden; margin-top: 5px">
                <div class="panel panel-body panel-default">

                         another list here, but this div should have an auto max height so that when the list is really long, it does not force the entire page to scroll, but instead extends its height to as far low as it can without making the page scroll, and have a scrollbar within the div itself. Currently, it is set with max-height of 800px. This should be autoset depending in browser viewport size. 
                    </br>

                    </br>

                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
</body>

```