Полоса прокрутки на конкретном div в загрузочном модальном теле

Question

Модальное тело имеет два div бок о бок, один из них должен иметь полосу прокрутки, если его содержимое слишком велико для модального. К сожалению, полоса прокрутки появляется на модальном теле, а не на моем div.

Что у меня есть:

Что я хочу:

Мои panelGuest имеет overflow-y к автомобилю, я попытался с 'прокрутки', но вместо этого полоса прокрутки отображается но недоступны. Я пробовал разные значения для переполнения на модальном теле, напрасно.

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> 

Здесь скрипку с вопросом: http://jsfiddle.net/Ua2HM/2/

Answer 1

Я сделал это делает высоту модального фиксированного значения:

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

Это то, что вам нужно?

Answer 2

Я думаю, вам нужно сделать панельGuest position:relative и установить определенную высоту на modalShareBody, чтобы панели могли быть на 100%.

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

Вот обновленный скрипку: http://jsfiddle.net/skelly/Ua2HM/5/