Updates after testing on IE edge.

converse.js

@@ -2917,11 +2917,13 @@
                 if (!this.model.get('hidden_occupants')) {
                     this.model.save({hidden_occupants: true});
                     $el.removeClass('icon-hide-users').addClass('icon-show-users');
-                    this.$('div.occupants').addClass('hidden');
+                    this.$('.occupants').addClass('hidden');
+                    this.$('.chat-area').addClass('full');
                     this.scrollDown();
                 } else {
                     this.model.save({hidden_occupants: false});
                     $el.removeClass('icon-show-users').addClass('icon-hide-users');
+                    this.$('.chat-area').removeClass('full');
                     this.$('div.occupants').removeClass('hidden');
                     this.scrollDown();
                 }

css/converse.css

@@ -1685,7 +1685,7 @@
     height: 289px;
     height: -webkit-calc(100% - 55px);
     height: calc(100% - 55px);
-    overflow-y: scroll;
+    overflow-y: auto;
     overflow-x: hidden; }
     #conversejs #controlbox .controlbox-pane label {
       font-size: 14px;
@@ -1878,29 +1878,28 @@
       height: calc(100% - 55px);
       background-color: white;
       border-top: 0;
-      display: table;
-      table-layout: fixed;
       width: 100%; }
       #conversejs .chatroom .box-flyout .chatroom-body .chat-area {
         word-wrap: break-word;
-        display: table-cell;
         height: 100%;
+        max-width: 70%;
+        float: left;
         min-width: 200px; }
         #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
           padding: 0 0.5em 0 0.5em; }
+        #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full {
+          max-width: 100%; }
       #conversejs .chatroom .box-flyout .chatroom-body .mentioned {
         font-weight: bold; }
       #conversejs .chatroom .box-flyout .chatroom-body .chat-msg-room {
         color: #1A9707; }
       #conversejs .chatroom .box-flyout .chatroom-body .occupants {
-        display: table-cell;
         vertical-align: top;
         background-color: white;
-        overflow-y: auto;
-        overflow-x: hidden;
+        overflow: hidden;
         border-left: 1px solid #818479;
         border-bottom-right-radius: 4px;
-        width: 100px;
+        min-width: 30%;
         height: 100%; }
         #conversejs .chatroom .box-flyout .chatroom-body .occupants.hidden {
           display: none; }
@@ -1908,8 +1907,10 @@
           padding: 0.3em;
           font-weight: bold; }
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupant-list {
-          height: 100%;
-          overflow-y: scroll;
+          height: 85%;
+          height: calc(100% - 70px);
+          overflow-x: hidden;
+          overflow-y: auto;
           list-style: none; }
           #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupant-list li {
             cursor: default;

sass/_chatrooms.scss

@@ -33,19 +33,21 @@
                 @include calc(height, '100% - #{$chat-head-height}');
                 background-color: white;
                 border-top: 0;
-                display: table;
-                table-layout: fixed;
                 width: 100%;
 
                 .chat-area {
                     word-wrap: break-word; 
-                    display: table-cell;
                     height: 100%;
+                    max-width: 70%;
+                    float: left;
                     min-width: $chat-width;
                     .chat-content {
                         // There's an annoying Chrome box-sizing bug which prevents us from adding 0.5em padding here.
                         padding: 0 0.5em 0 0.5em;
                     }
+                    &.full {
+                        max-width: 100%;
+                    }
                 }
                 .mentioned {
                     font-weight: bold;
@@ -54,14 +56,12 @@
                     color: $message-them-color;
                 }
                 .occupants {
-                    display: table-cell;
                     vertical-align: top;
                     background-color: white;
-                    overflow-y: auto;
-                    overflow-x: hidden;
+                    overflow: hidden;
                     border-left: 1px solid $text-color;
                     border-bottom-right-radius: $chatbox-border-radius;
-                    width: 100px;
+                    min-width: 30%;
                     height: 100%;
                     &.hidden {
                         display: none;
@@ -71,8 +71,10 @@
                         font-weight: bold;
                     }
                     .occupant-list {
-                        height: 100%;
-                        overflow-y: scroll;
+                        height: 85%;
+                        height: calc(100% - 70px);
+                        overflow-x: hidden;
+                        overflow-y: auto;
                         list-style: none;
                         li {
                             cursor: default;

sass/_controlbox.scss

@@ -305,7 +305,7 @@
             width: 100%;
             height: 289px;
             @include calc(height, '100% - #{$chat-head-height}');
-            overflow-y: scroll;
+            overflow-y: auto;
             overflow-x: hidden;
             label {
                 font-size: $font-size;