diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss
index 26526f403a..72b8ed4436 100644
--- a/res/css/structures/_RoomSubList.scss
+++ b/res/css/structures/_RoomSubList.scss
@@ -15,10 +15,15 @@ limitations under the License.
 */
 
 .mx_RoomSubList {
-    display: table;
-    table-layout: fixed;
-    width: 100%;
+    min-height: 80px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
 
+.mx_RoomSubList_hidden {
+    flex: 0;
+    min-height: unset;
 }
 
 .mx_RoomSubList_resizer {
diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss
index 30d5272574..3ce47a4bc6 100644
--- a/res/css/views/rooms/_RoomList.scss
+++ b/res/css/views/rooms/_RoomList.scss
@@ -57,8 +57,3 @@ limitations under the License.
     right: 60px;
 }
 
-.mx_RoomList_itemsSubList {
-    min-height: 80px;
-    flex: 1;
-}
-
diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index 8d601177bb..4976d3e211 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -362,12 +362,22 @@ const RoomSubList = React.createClass({
             }
         }
 
-        if (this.state.sortedList.length > 0 || this.props.extraTiles.length > 0) {
-            const subList = this.state.hidden ? undefined : content;
-            return <div className={"mx_RoomSubList"}>
-                {this._getHeaderJsx()}
-                {subList}
-            </div>;
+        const len = this.state.sortedList.length + this.props.extraTiles.length;
+
+        if (len) {
+            if (this.state.hidden) {
+                return <div className={["mx_RoomSubList", "mx_RoomSubList_hidden"]}>
+                    {this._getHeaderJsx()}
+                </div>;
+            } else {
+                const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
+                return <div className={"mx_RoomSubList"} style={{flexGrow: len}}>
+                    {this._getHeaderJsx()}
+                    <GeminiScrollbarWrapper>
+                        { content }
+                    </GeminiScrollbarWrapper>
+                </div>;
+            }
         } else {
             const Loader = sdk.getComponent("elements.Spinner");
             if (this.props.showSpinner) {
diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js
index 9978aa25f2..d9913907d1 100644
--- a/src/components/views/rooms/RoomList.js
+++ b/src/components/views/rooms/RoomList.js
@@ -505,13 +505,8 @@ module.exports = React.createClass({
         return ret;
     },
 
-    _collectGemini(gemScroll) {
-        this._gemScroll = gemScroll;
-    },
-
     render: function() {
         const RoomSubList = sdk.getComponent('structures.RoomSubList');
-        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
 
         // XXX: we can't detect device-level (localStorage) settings onChange as the SettingsStore does not notify
         // so checking on every render is the sanest thing at this time.
@@ -537,10 +532,7 @@ module.exports = React.createClass({
                 const {key, label, ... otherProps} = props;
                 const chosenKey = key || label;
 
-                let subList = <GeminiScrollbarWrapper style={{flexGrow: len}} className={"mx_RoomList_itemsSubList"} key={chosenKey}>
-                                { <RoomSubList label={label} {...otherProps} /> }
-                            </GeminiScrollbarWrapper>;
-
+                let subList = <RoomSubList key={chosenKey} label={label} {...otherProps} />;
                 if (!isLast) {
                     return components.concat(
                         subList,