Прокрутка в вертикальной навигационной панели

Question

У меня есть пример (JSFiddle Example), где я хочу, чтобы содержимое навигационной панели было прокручиваемо, если оно обрезано размером экрана браузера. См. Normal Size и Small Size для текущих проблем.

Обязательным условием является то, что левая часть экрана (250px) покрыта панелью навигации (или любым родителем), если размер экрана равен > 768px.

До сих пор я не получал удовлетворительного результата, поэтому я обращаюсь за помощью!

Заранее благодарен!

CSS

@media (min-width: 768px) 
{ 
    .sidebar-main.expanded { 
     width: 250px; 
    } 

    .sidebar-main { 
     position: fixed; 
     height: 100%; 
    } 

    .sidebar-main .navbar { 
     height: 100%; 
    } 

    .sidebar-main .navbar .open .dropdown-menu { 
     position: static; 
     float: none; 
     width: auto; 
     margin-top: 0; 
     background-color: transparent; 
     border: 0; 
     box-shadow: none; 
    } 

    .sidebar-main .navbar-header { 
     float: none !important; 
    } 

    .sidebar-main .navbar-collapse { 
     padding: 0px; 
     max-height: none; 
    } 

    .sidebar-main ul { 
     float: none; 
     &: not { 
      display: block; 
     } 
    } 

    .sidebar-main li { 
     float: none; 
     display: block; 
    } 
} 

Answer 1

Fixed эту проблему, установив высоту вручную до определенного значения PX в Javascript, хотя я хотел бы избежать этого, мне кажется, как единственное решение.

Answer 2

Пробовал добавлять overflow-y: auto в nav элемент? Меня устраивает.

nav { 
    overflow-y: auto; 
} 

рабочий fiddle