Überlauf-y blättern in einem verschachtelten div?

Question

Ich habe ein Container div mit 2 Spalten. Ich muss den Container auf einen Prozentsatz der Ansicht einstellen, also habe ich 75vh verwendet.

In der linken Spalte ist ein Bootstrap-Panel und eine Menge Inhalt. Ich möchte, dass das div scrollt, wenn es nicht passt, und es lehnt ab. Mir ist klar, dass ich etwas Einfaches vermissen muss.

http://codepen.io/smlombardi/pen/ONoWQd

CSS:

.container { 
    border: 1px solid #000; 
    width: 80vw; 
    height: 75vh; 
    .left-pane { 
     overflow-y: scroll; 
     border: 1px solid #0f0; 
     height: 100%; 
    } 
    .right-pane { 
     background-color: #ccc; 
    } 

    } 

HTML:

<div class="container"> 
    <div class="row"> 
    <div class="col-md-7 left-pane"> 
     <div class="panel panel-default"> 
      Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. 

Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. 

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. 

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 

     </div> 

    </div> 
    <div class="col-md-5 right-pane"></div> 
    </div> 
</div> 

Answer 1

Ich denke, das Problem hier ist, dass die Platte nicht über eine max-height und kann nur halten immer größer, deshalb Es wird nicht scrollen.

Ich habe es funktioniert, indem Sie max-height: 75vh; zu .left-pane hinzufügen.

Wenn Sie wollen, dass der gesamte Container scrollt, stellen Sie einfach height auf max-height.

Answer 2

Wie Coleman erwähnt, war es nur eine Frage der Zugabe des max-height:

.left-pane { 
    overflow-y: scroll; 
    border: 1px solid #0f0; 
    max-height: 75vh; 

} 

hier ist Link: http://codepen.io/Keinchy/pen/ONomZz