CSS: submenu height: 100% // position: fixed

I have tried lots of element styles to create a scrollable sub-menu when we have lots of "li". What´s happening is when the parent are open the sub-menu will offset mobile screen, and do not create the scroll.

There is anyway to force the parent "menu-item-486" (when we have static position in $this; and the sub-menu with the element height: 100%) to create scroll with no height less then: 100% (ie.: the sub-menu with height: 400px);

I create a class "fixHeightOffset" to use if necessary.

My Menu is more or less this:

<div class="menu-menu-container">
<ul id="primary-menu" class="nav navbar-nav">
<li id="menu-item-15"><a href="#">Home</a></li>


<li id="menu-item-486" class="menu-item menu-item-has-children sub-menu-open"><a href="#">Menu</a>
<ul class="sub-menu show fixHeightOffset">
<li id="menu-item-1" class="menu-item menu-item-1"><a href="#">All</a></li>
<li id="menu-item-4" class="menu-item menu-item-4"><a href="#">A</a></li>
<li id="menu-item-5" class="menu-item menu-item-5"><a href="#">B</a></li>
<li id="menu-item-6" class="menu-item menu-item-6"><a href="#">C</a></li>
<li id="menu-item-7" class="menu-item menu-item-7 menu-item-has-children sub-menu-open">
<a href="#">I</a>
    <ul class="sub-menu show">
    <li id="menu-item-57" class="menu-item menu-item-57"><a href="#">D</a></li>
    <li id="menu-item-59" class="menu-item menu-item-59"><a href="#">M</a></li>
    <li id="menu-item-60" class="menu-item menu-item-60"><a href="#">B </a></li>
    </ul>
</li>
    <li id="menu-item-48" class="menu-item menu-item-48"><a href="#">L</a></li>
    <li id="menu-item-51" class="menu-item menu-item-51"><a href="#">M</a></li>
    <li id="menu-item-46" class="menu-item menu-item-46"><a href="#">N</a></li>
    <li id="menu-item-47" class="menu-item menu-item-47"><a href="#">O</a></li>
    <li id="menu-item-50" class="menu-item menu-item-48"><a href="#">P</a></li>
</ul>
</li>
</ul>
</div>

Thank you!