diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index cda1c9967e..852dddd063 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -313,6 +313,12 @@ const RoomSubList = React.createClass({
         }
     },
 
+    setHeight: function(height) {
+        if (this.refs.subList) {
+            this.refs.subList.style.height = `${height}px`;
+        }
+    },
+
     render: function() {
         const len = this.props.list.length + this.props.extraTiles.length;
         if (len) {
@@ -322,13 +328,13 @@ const RoomSubList = React.createClass({
                 "mx_RoomSubList_nonEmpty": len && !this.state.hidden,
             });
             if (this.state.hidden) {
-                return <div className={subListClasses}>
+                return <div ref="subList" className={subListClasses}>
                     {this._getHeaderJsx()}
                 </div>;
             } else {
                 const tiles = this.makeRoomTiles();
                 tiles.push(...this.props.extraTiles);
-                return <div className={subListClasses}>
+                return <div ref="subList" className={subListClasses}>
                     {this._getHeaderJsx()}
                     <IndicatorScrollbar ref="scroller" className="mx_RoomSubList_scroll">
                         { tiles }
@@ -343,7 +349,7 @@ const RoomSubList = React.createClass({
             }
 
             return (
-                <div className="mx_RoomSubList">
+                <div ref="subList" className="mx_RoomSubList">
                     { this._getHeaderJsx() }
                     { content }
                 </div>
diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js
index 1a714e3a84..647e755456 100644
--- a/src/components/views/rooms/RoomList.js
+++ b/src/components/views/rooms/RoomList.js
@@ -36,7 +36,8 @@ import GroupStore from '../../../stores/GroupStore';
 import RoomSubList from '../../structures/RoomSubList';
 import ResizeHandle from '../elements/ResizeHandle';
 
-import {Resizer, RoomSubListDistributor} from '../../../resizer'
+import {Resizer} from '../../../resizer'
+import {Layout, Distributor} from '../../../resizer/distributors/roomsublist2';
 const HIDE_CONFERENCE_CHANS = true;
 const STANDARD_TAGS_REGEX = /^(m\.(favourite|lowpriority|server_notice)|im\.vector\.fake\.(invite|recent|direct|archived))$/;
 
@@ -79,6 +80,20 @@ module.exports = React.createClass({
         const collapsedJson = window.localStorage.getItem("mx_roomlist_collapsed");
         this.subListSizes = sizesJson ? JSON.parse(sizesJson) : {};
         this.collapsedState = collapsedJson ? JSON.parse(collapsedJson) : {};
+        this._layoutSections = [];
+
+        this._layout = new Layout((key, size) => {
+            const subList = this._subListRefs[key];
+            if (subList) {
+                subList.setHeight(size);
+            }
+            this.subListSizes[key] = size;
+            window.localStorage.setItem("mx_roomlist_sizes",
+                JSON.stringify(this.subListSizes));
+            // update overflow indicators
+            this._checkSubListsOverflow();
+        }, this.subListSizes, this.collapsedState);
+
         return {
             isLoadingLeftRooms: false,
             totalRoomCount: null,
@@ -166,19 +181,18 @@ module.exports = React.createClass({
     componentDidMount: function() {
         this.dispatcherRef = dis.register(this.onAction);
         const cfg = {
-            onResized: this._onSubListResize,
+            layout: this._layout,
         };
-        this.resizer = new Resizer(this.resizeContainer, RoomSubListDistributor, cfg);
+        this.resizer = new Resizer(this.resizeContainer, Distributor, cfg);
         this.resizer.setClassNames({
             handle: "mx_ResizeHandle",
             vertical: "mx_ResizeHandle_vertical",
             reverse: "mx_ResizeHandle_reverse"
         });
-
-        // load stored sizes
-        Object.keys(this.subListSizes).forEach((key) => {
-            this._restoreSubListSize(key);
-        });
+        this._layout.update(
+            this._layoutSections,
+            this.resizeContainer && this.resizeContainer.clientHeight,
+        );
         this._checkSubListsOverflow();
 
         this.resizer.attach();
@@ -194,6 +208,11 @@ module.exports = React.createClass({
             });
             this._checkSubListsOverflow();
         }
+        this._layout.update(
+            this._layoutSections,
+            this.resizeContainer && this.resizeContainer.clientHeight,
+        );
+        // TODO: call layout.setAvailableHeight, window height was changed when bannerShown prop was changed
     },
 
     onAction: function(payload) {
@@ -551,9 +570,7 @@ module.exports = React.createClass({
         this.collapsedState[key] = collapsed;
         window.localStorage.setItem("mx_roomlist_collapsed", JSON.stringify(this.collapsedState));
         // load the persisted size configuration of the expanded sub list
-        if (!collapsed) {
-            this._restoreSubListSize(key);
-        }
+        this._layout.setCollapsed(key, collapsed);
         // check overflow, as sub lists sizes have changed
         // important this happens after calling resize above
         this._checkSubListsOverflow();
@@ -581,6 +598,7 @@ module.exports = React.createClass({
     },
 
     _mapSubListProps: function(subListsProps) {
+        this._layoutSections = [];
         const defaultProps = {
             collapsed: this.props.collapsed,
             isFiltered: !!this.props.searchFilter,
@@ -599,6 +617,7 @@ module.exports = React.createClass({
         return subListsProps.reduce((components, props, i) => {
             props = Object.assign({}, defaultProps, props);
             const isLast = i === subListsProps.length - 1;
+            const len = props.list.length + (props.extraTiles ? props.extraTiles.length : 0);
             const {key, label, onHeaderClick, ... otherProps} = props;
             const chosenKey = key || label;
             const onSubListHeaderClick = (collapsed) => {
@@ -608,7 +627,10 @@ module.exports = React.createClass({
                 }
             };
             const startAsHidden = props.startAsHidden || this.collapsedState[chosenKey];
-
+            this._layoutSections.push({
+                id: chosenKey,
+                count: len,
+            });
             let subList = (<RoomSubList
                 ref={this._subListRef.bind(this, chosenKey)}
                 startAsHidden={startAsHidden}