CSS how to make scrollable list
As per your question vertical listing have a scrollbar effect.
CSS / HTML :
nav ul{height:200px; width:18%;}
nav ul{overflow:hidden; overflow-y:scroll;}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<header>header area</header>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
<li>Link 10</li>
<li>Link 11</li>
<li>Link 13</li>
<li>Link 13</li>
</ul>
</nav>
<footer>footer area</footer>
</body>
</html>Another solution would be as below where the list is placed under a drop-down button.
<button class="btn dropdown-toggle btn-primary btn-sm" data-toggle="dropdown"
>Markets<span class="caret"></span></button>
<ul class="dropdown-menu", style="height:40%; overflow:hidden; overflow-y:scroll;">
{{ form.markets }}
</ul>