Проблема высоты фиксированной вертикальной навигации?

Question

Просто я создаю вертикальную навигацию для небольших экранов, контейнер навигации фиксирован.Навигация, конечно, имеет элементы .menu, и при нажатии на меню отображается подменю, поэтому навигация расширяется.

HTML выглядит так:

.main-nav ===> div  // the container
.nav-items ====> ul // child of .main-nav and the 
                       container of all .menu items

.menu ====> li // children of .nav-items, they are the navigation items 
                  that whenever clicked  sub menus extends
                  from max-height: 0 
                  to max-height: 300px

.sub-menu ===> ul // the sub menus that are shown 
                  whenever corresponding menus clicked

Я преодолелЗадача прокрутки, задав .main-nav (контейнер) overflow:hidden и .nav-items overflow: auto и ширину контейнера и высоту 100%.и .nav-items ширина 106%, поэтому полоса прокрутки скрыта

Проблема в том, что я задаю контейнеру границу, и потому что я задаю контейнеру высоту 100%, поэтому у меня всегда 100% высоты границотображается еще до того, как навигация расширяется, чтобы охватить всю эту высоту.

Это код:

//The container
.main-nav {
    position: fixed;
    right: 50px;
    top: 50px;
    overflow: hidden;
    width: 250px;
    border: 1px solid #eee;
    border-top: 4px solid #000;
    overflow: hidden;
    height: 100%;
}

// the container of all .menu elements
.nav-items {
    overflow: auto;
    max-height: 100%;
    width: 106%;
}

.menu  {
    position: relative;
    padding: 1em;
    border-bottom: 1px solid #eee;
    font-weight: 700;
    width: 100%;    
}


.sub-menu {
    max-height: 0;
    transition: max-height 0.4s ease-in-out;
    overflow: hidden;
}

input[type="radio"]:checked + .sub-menu {
  max-height: 300px;
  transition: max-height 0.4s ease-in-out;
}

Я пытался использовать max-height: 100% вместо высоты для .main-nav, но я понял,что мне нужна высота, а не максимальная высота, чтобы свиток работал должным образом в моем случае.

Извините, если мою проблему сложно объяснить, но я изо всех сил пытался ее объяснить, надеюсь, она достаточно ясна !!

Вопрос в следующем:

Как сделать мою навигацию правильной и плавной, не искажая возможности прокрутки, когда навигация переполняет высоту порта просмотра ??