diff --git a/converse.js b/converse.js
index e65715b9c..ee6ec4324 100644
--- a/converse.js
+++ b/converse.js
@@ -1336,8 +1336,8 @@
                 /* Determine and store the default box size.
                  * We need this information for the drag-resizing feature.
                  */
+                var $flyout = this.$el.find('.box-flyout');
                 if (typeof this.model.get('height') == 'undefined') {
-                    var $flyout = this.$el.find('.box-flyout');
                     var height = $flyout.height();
                     var width = $flyout.width();
                     this.model.set('height', height);
@@ -1345,6 +1345,10 @@
                     this.model.set('width', width);
                     this.model.set('default_width', width);
                 }
+                var min_width = $flyout.css('min-width');
+                var min_height = $flyout.css('min-height');
+                this.model.set('min_width', min_width.endsWith('px') ? Number(min_width.replace(/px$/, '')) :0);
+                this.model.set('min_height', min_height.endsWith('px') ? Number(min_height.replace(/px$/, '')) :0);
                 // Initialize last known mouse position
                 this.prev_pageY = 0;
                 this.prev_pageX = 0;
@@ -1770,7 +1774,7 @@
                 if (converse.resizing.direction.indexOf('top') === 0) {
                     diff = ev.pageY - this.prev_pageY;
                     if (diff) {
-                        this.height -= diff;
+                        this.height = ((this.height-diff) > this.model.get('min_height')) ? (this.height-diff) : this.model.get('min_height');
                         this.prev_pageY = ev.pageY;
                         this.setChatBoxHeight(this.height);
                     }
@@ -1778,7 +1782,7 @@
                 if (converse.resizing.direction.indexOf('left') !== -1) {
                     diff = this.prev_pageX - ev.pageX;
                     if (diff) {
-                        this.width += diff;
+                        this.width = ((this.width+diff) > this.model.get('min_width')) ? (this.width+diff) : this.model.get('min_width');
                         this.prev_pageX = ev.pageX;
                         this.setChatBoxWidth(this.width);
                     }
diff --git a/css/converse.css b/css/converse.css
index 200bda726..c6dd77172 100644
--- a/css/converse.css
+++ b/css/converse.css
@@ -1255,7 +1255,9 @@
     bottom: 6px;
     box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
     display: block;
-    position: absolute; }
+    position: absolute;
+    min-width: 200px;
+    min-height: 200px; }
   #conversejs .box-flyout {
     height: 400px; }
     @media screen and (max-width: 480px) {
diff --git a/sass/_core.scss b/sass/_core.scss
index 5bb54679a..caafaa52f 100644
--- a/sass/_core.scss
+++ b/sass/_core.scss
@@ -1510,6 +1510,8 @@
     box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
     display: block;
     position: absolute;
+    min-width: $chat-width;
+    min-height: $chat-height/2;
   }
 
   .box-flyout {