title: Making unordered list scrollable
body: <p>I have an unordered list which is inside a div tag and initially the list is empty. When items are added on to it, it will expand and I want it to be scroll-able once it the length of the list exceeds that of the web page, i.e I do not want the web page to scroll, I want only the unordered list to scroll. However currently, the scroll bar for my unordered list is not appearing.</p>
  
  <p>My html code is:</p>
  
  <pre><code>&lt;div style="width: 25%; float: right; " class="online_users"&gt;
    &lt;div class="panel panel-primary"&gt;
      &lt;div class="panel-heading"&gt;
        &lt;span class="glyphicon glyphicon-comment"&gt;&lt;/span&gt; Online Users
          &lt;ul id="ListOfOnlineUsers" style="overflow: auto;height:100%; word-wrap: break-word;" class="list-group"&gt;  
          &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS code is</p>
  
  <pre><code>html{
      height: 100%
  }
  
  {
    margin: 0;
    padding: 0;
  }
  body {
    padding: 50px;
    font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
    height: 100%;
  
  }
  
  a {
    color: #00B7FF;
  }
  
  .chat
  {
      list-style: none;
      margin: 0;
      padding: 0;
  }
  
  .chat li
  {
      margin-bottom: 10px;
      padding-bottom: 5px;
      border-bottom: 1px dotted #B3A9A9;
  }
  
  .chat li.left .chat-body
  {
      /*margin-left: 60px;*/
  }
  
  .chat li.right .chat-body
  {
      /*()margin-right: 60px;*/
  }
  
  
  .chat li .chat-body p
  {
      margin: 0;
      color: #777777;
      word-wrap: break-word;
  }
  
  .panel .slidedown .glyphicon, .chat .glyphicon
  {
      /*margin-right: 5px;*/
  }
  
  .panel-body
  {
      overflow-y: scroll;
      top: 1em;
      left: 1em;
      height: 250px;
  }
  
  ::-webkit-scrollbar-track
  {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      background-color: #F5F5F5;
  }
  
  ::-webkit-scrollbar
  {
      width: 12px;
      background-color: #F5F5F5;
  }
  
  ::-webkit-scrollbar-thumb
  {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
      background-color: #555;
  }
  
  
  /* CSS used here will be applied after bootstrap.css */
  body, html {
      height: 100%;
      background-repeat: no-repeat;
      background-image: linear-gradient(rgb(154, 145, 162), rgb(12, 97, 33));
  }
  
  .card-container.card {
      width: 350px;
      padding: 40px 40px;
  }
  .card {
      background-color: #F7F7F7;
      /* just in case there no content*/
      padding: 20px 25px 30px;
      margin: 0 auto 25px;
      margin-top: 50px;
      /* shadows and rounded borders */
      -moz-border-radius: 2px;
      -webkit-border-radius: 2px;
      border-radius: 2px;
      -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
      -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
      box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  }
  .btn {
      font-weight: 700;
      height: 36px;
      -moz-user-select: none;
      -webkit-user-select: none;
      user-select: none;
      cursor: default;
  }
  
  .form-signin input[type=text],
  .form-signin button {
      width: 100%;
      display: block;
      margin-bottom: 10px;
      z-index: 1;
      position: relative;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
  }
  
  .btn.btn-signin:hover,
  .btn.btn-signin:active,
  .btn.btn-signin:focus {
      background-color: rgb(12, 97, 33);
  }
  </code></pre>