--- a/css/tram-im.css	Sat Dec 17 17:41:38 2016 +0800
+++ b/css/tram-im.css	Sat Dec 17 11:47:23 2016 +0800
@@ -160,6 +160,8 @@
     border-right: 1px solid #ddd;
 }
 .contact-list {
+    height: 300px;
+    overflow-y: auto;
     margin: 0 -15px 15px -15px;
 }
 li.contact {

--- a/index.html	Sat Dec 17 17:41:38 2016 +0800
+++ b/index.html	Sat Dec 17 11:47:23 2016 +0800
@@ -129,9 +129,9 @@
       <div class="uk-flex-item-none" data-app="calls"></div>
 
       <div class="uk-grid uk-flex-item-auto main-grid">
-        <div class="uk-width-xlarge-1-4 uk-width-large-1-3 uk-width-medium-1-2 contact-list-block">
-          <ul class="uk-list contact-list" data-app="contacts"></ul>
-          <div class="uk-form input-group">
+        <div class="uk-width-xlarge-1-4 uk-width-large-1-3 uk-width-medium-1-2 uk-flex uk-flex-column contact-list-block">
+          <ul class="uk-list uk-flex-item-auto contact-list" data-app="contacts"></ul>
+          <div class="uk-form uk-flex-item-none input-group">
             <input id="new-contact" type="text" value="" placeholder="add a contact" required>
             <span class="input-group-button">
               <button type="button" class="uk-button uk-button-success" data-add-button>