Barra di scorrimento su un div specifico nel corpo modale bootstrap

Question

Il mio modal-body ha due div uno affianco all'altro, uno di loro deve avere una barra di scorrimento se il suo contenuto è troppo grande per il modale. Sfortunatamente, la barra di scorrimento appare sul corpo modale, non sul mio div.

Quello che ho:

quello che voglio:

mio panelGuest ha la overflow-y per l'auto, ho provato con 'scorrere' al posto, ma viene mostrata la barra di scorrimento ma non disponibile. Ho provato diversi valori per il trabocco sul corpo modale, invano.

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> 

Ecco un violino con il problema: http://jsfiddle.net/Ua2HM/2/

Answer 1

ho fatto fare l'altezza del modal un valore fisso:

#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%; 
} 

È quello che ti serve?

Answer 2

Penso che sia necessario creare panelGuest position:relative e impostare un'altezza specifica sul modalShareBody in modo che i pannelli possano essere al 100%.

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

Ecco la aggiornato violino: http://jsfiddle.net/skelly/Ua2HM/5/