Scroll bar on specific div in botstrap module

Question

My modal body has two divs side by side, one of them should have a scroll bar if its contents are too large for the modal. Unfortunately, the scrollbar appears on the modal body, not on my div.

What I have:

What I want:

My Guest panel has overflow-y for auto, I tried with "scroll", but the scroll bar is displayed but not available. I tried different values ​​for overflow on a modal body, in vain.

CSS

 #panelGuest{ overflow-y:auto; overflow-x:hidden; width: 35%; float:left; border-right:solid #ff920a 2px; min-height:100px; } 

HTML:

  <div id="modalShareBody" class="modal-body"> <div id="panelGuest" class="panel"> The div where i want the y-scrollbar </div> <div id="panelDetail" class="panel"> </div> </div> 

Here is the scenario with the problem: http://jsfiddle.net/Ua2HM/2/

Answer 1

I did this by making the height of the modal fixed value:

 #modalShare { margin-left:-200px; height: 300px; } @media (max-width: 767px) { #modalShare { width: auto; margin-left: auto; } } #modalShareBody { overflow:hidden; } #panelGuest{ width: 35%; float:left; height: 200px; overflow-y: auto; overflow-x: hidden; border-right:solid #ff920a 2px; } #panelDetail{ float:left; width: 60%; } 

That's what you need?

Answer 2

It seems to me that you need to make panelGuest position:relative and set a certain height in modalShareBody so that the panels can be 100%.

 #panelGuest{ position: relative; width: 35%; float:left; border-right:solid #ff920a 2px; min-height:100px; height: 100%; overflow: auto; } 

Here is the updated script : http://jsfiddle.net/skelly/Ua2HM/5/