Separate 2 regions of the screen with their own vertical scrollbar - html

Question

I'm rendering with Angular.js and Bootstrap 2.3.2 a series of thumbnails in the left side of the screen, on the right side I have the larger version, at the moment I'm able to get only one scrollbar, I would like to make them independent with their own vertical scrollbar, without using the frames but only css.
HTML:
<div class="row">
<div class="span3">
<div class="thumbs-list">
<div infinite-scroll='nextThumb()' infinite-scroll-disabled='busyThumb' infinite-scroll- distance='1'>
<div class='thumb' ng-repeat='thumb in arrayOfThumbs'>
<div class="image-thumbnail">
<ul class="scrubber" style="width: 115px; height:auto; padding: 0px;">
<li style="display: block;" ng-click="viewImage(doc)">
<a href="#">
<img ng-src="{{thumb.code}}" alt="" title="Thumb 1"></img>
</a>
</li>
</ul>
</div> <!-- END image-thumbnail -->
</div> <!-- END class='thumb' -->
</div> <!-- END infinite-scroll -->
</div> <!-- END thumb-list -->
</div><!-- END span3 -->
<div class="span12">
<div class="images-list">
<div infinite-scroll='nextImage()' infinite-scroll-disabled='busyImage' infinite-scroll- distance='1'>
<div class='image-page' ng-repeat='image in arrayOfImages'>
<ul class="scrubber-page" >
<li style="display: blockImage;" ng-click="zoom(doc)">
<a href="#">
<img ng-src="{{image.code}}" alt="" title="Page 1"></img>
</a>
</li>
</ul>
</div> <!-- END class='image-page' -->
</div> <!-- END infinite-scroll -->
</div> <!-- END images-list -->
</div> <!-- END span12 -->
</div> <!-- END row -->
CSS:
.thumbs-list {
margin-top: 95px;
position: absolute;
display: block;
padding: 8px;
height: auto;
overflow:auto;
}
.image-thumbnail {
margin-top:15px;
height: auto;
overflow: auto;
text-align: center;
padding: 1em 1em;
border: 1px solid #aaa;
background: #fff;
color: #222;
border-radius: 0px;
-moz-box-shadow: 3px 3px 10px 3px #ccc;
-webkit-box-shadow: 3px 3px 10px 3px #ccc;
box-shadow: 3px 3px 10px 3px #ccc;
}
.images-list {
margin-top: 95px;
position: absolute;
display: block;
padding: 8px;
height: auto;
overflow:auto;
}
.image-page {
margin-top:15px;
height: auto;
overflow: auto;
text-align: center;
padding: 1em 1em;
border: 1px solid #aaa;
background: #fff;
color: #222;
border-radius: 0px;
-moz-box-shadow: 3px 3px 10px 3px #ccc;
-webkit-box-shadow: 3px 3px 10px 3px #ccc;
box-shadow: 3px 3px 10px 3px #ccc;
}
.scrubber-page {
height:auto;
width:auto;
overflow:auto;
}

Answer 1

Did you tried to set a height / width of your elements and add :
overflow: scroll;
Then you will have a scroll bar for each elements with bigger content than their size.