CSS - make list wrap to fit viewport height - html

Question

I want to make a wrap it's content to the right so it fits the browser height.
As you can see in the screenshot the list doesn't fit onto the screen.
Example:
#dropdown-menu-id
{
display: block !important;
top: 0 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul role="menu" class=" dropdown-menu" id="dropdown-menu-id">
<li id="menu-item-816" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-816">Egg</li>
<li id="menu-item-817" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-817">Alberschwende</li>
<li id="menu-item-818" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-818">Andelsbuch</li>
<li id="menu-item-819" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-819">Au</li>
<li id="menu-item-820" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-820">Bezau</li>
<li id="menu-item-854" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-854">Bizau</li>
<li id="menu-item-856" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-856">Buch</li>
<li id="menu-item-858" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-858">Damüls</li>
<li id="menu-item-860" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-860">Doren</li>
<li id="menu-item-862" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-862">Hittisau</li>
<li id="menu-item-864" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-864">Krumbach</li>
<li id="menu-item-866" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-866">Langenegg</li>
<li id="menu-item-868" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-868">Lingenau</li>
<li id="menu-item-870" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-870">Mellau</li>
<li id="menu-item-872" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-872">Reuthe</li>
<li id="menu-item-874" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-874">Riefensberg</li>
<li id="menu-item-876" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-876">Schnepfau</li>
<li id="menu-item-878" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-878">Schoppernau</li>
<li id="menu-item-880" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-880">Schröcken</li>
<li id="menu-item-882" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-882">Schwarzenberg</li>
<li id="menu-item-884" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-884">Sibratsgfäll</li>
<li id="menu-item-886" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-886">Sulzberg</li>
<li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888">Warth</li>
<li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888">12</li>
<li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888">11</li>
<li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888">10</li>
<li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888">9</li><li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888">8</li>
<li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888">7</li>
<li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888">6</li>
<li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888">5</li><li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888">4</li><li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888">3</li><li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888">2</li>
<li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888">1</li>
</ul>
As you can see the list doesnt fit into the browser.

Answer 1

You have two options...
Option 1: List is viewport height.
In this option, your list will be capped by the height of the screen and become scrollable.
ul{
background:#CCC;
display:block;
width:200px;
height:100vh;
overflow:auto;
}
The key code to pay attention to here is height:100vh or "Height is 100% of the Viewport's Height." and the overflow:auto; or "hide and make the overflowed text scrollable."
Option 2: List has max height.
In this option you will define a height, for example, 200px and set the overflow to auto.
ul{
background:#EEE;
display:block;
width:200px;
height:300px;
overflow:auto;
}
You can see both versions on my Fiddle here.