diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss
index c156f1f07e..8db0d4b836 100644
--- a/res/css/structures/_RoomSubList.scss
+++ b/res/css/structures/_RoomSubList.scss
@@ -14,15 +14,51 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+/* a word of explanation about the flex-shrink values employed here:
+   there are 3 priotized categories of screen real-estate grabbing,
+   each with a flex-shrink difference of 4 order of magnitude,
+   so they ideally wouldn't affect each other.
+   lowest category: .mx_RoomSubList
+        flex:-shrink: 10000000
+        distribute size of items within the same categery by their size
+   middle category: .mx_RoomSubList.resized-sized
+        flex:-shrink: 1000
+        applied when using the resizer, will have a max-height set to it,
+        to limit the size
+   highest category: .mx_RoomSubList.resized-all
+        flex:-shrink: 1
+        small flex-shrink value (1), is only added if you can drag the resizer so far
+        so in practice you can only assign this category if there is enough space.
+*/
+
 .mx_RoomSubList {
     min-height: 31px;
-    flex: 0 1 auto;
+    flex: 0 100000000 auto;
     display: flex;
     flex-direction: column;
 }
 
 .mx_RoomSubList_nonEmpty {
-    margin-bottom: 4px;
+    min-height: 76px;
+
+    .mx_AutoHideScrollbar_offset {
+        padding-bottom: 4px;
+    }
+}
+
+.mx_RoomSubList_hidden {
+    flex: none !important;
+}
+
+.mx_RoomSubList.resized-all {
+    flex: 0 1 auto;
+}
+
+.mx_RoomSubList.resized-sized {
+    /*  resizer set max-height on resized-sized,
+        so that limits the height and hence
+        needs a very small flex-shrink */
+    flex: 0 10000 auto;
 }
 
 .mx_RoomSubList_labelContainer {
@@ -105,39 +141,42 @@ limitations under the License.
 }
 
 .mx_RoomSubList_scroll {
-    /* let rooms list grab all available space */
+    /* let rooms list grab as much space as it needs (auto),
+       potentially overflowing and showing a scrollbar */
     flex: 0 1 auto;
     padding: 0 8px;
 }
 
-.mx_RoomSubList_scroll.mx_IndicatorScrollbar_topOverflow::before,
-.mx_RoomSubList_scroll.mx_IndicatorScrollbar_bottomOverflow::after {
-    position: sticky;
-    left: 0;
-    right: 0;
-    height: 40px;
-    content: "";
-    display: block;
-    z-index: 100;
-    pointer-events: none;
-}
+// overflow indicators
+.mx_RoomSubList:not(.resized-all) > .mx_RoomSubList_scroll {
+    &.mx_IndicatorScrollbar_topOverflow::before,
+    &.mx_IndicatorScrollbar_bottomOverflow::after {
+        position: sticky;
+        left: 0;
+        right: 0;
+        height: 40px;
+        content: "";
+        display: block;
+        z-index: 100;
+        pointer-events: none;
+    }
 
+    &.mx_IndicatorScrollbar_topOverflow > .mx_AutoHideScrollbar_offset {
+        margin-top: -40px;
+    }
+    &.mx_IndicatorScrollbar_bottomOverflow > .mx_AutoHideScrollbar_offset {
+        margin-bottom: -40px;
+    }
 
-.mx_RoomSubList_scroll.mx_IndicatorScrollbar_topOverflow > .mx_AutoHideScrollbar_offset {
-    margin-top: -40px;
-}
-.mx_RoomSubList_scroll.mx_IndicatorScrollbar_bottomOverflow > .mx_AutoHideScrollbar_offset {
-    margin-bottom: -40px;
-}
+    &.mx_IndicatorScrollbar_topOverflow::before {
+        top: 0;
+        background: linear-gradient($secondary-accent-color, transparent);
+    }
 
-.mx_RoomSubList_scroll.mx_IndicatorScrollbar_topOverflow::before {
-    top: 0;
-    background: linear-gradient($secondary-accent-color, transparent);
-}
-
-.mx_RoomSubList_scroll.mx_IndicatorScrollbar_bottomOverflow::after {
-    bottom: 0;
-    background: linear-gradient(transparent, $secondary-accent-color);
+    &.mx_IndicatorScrollbar_bottomOverflow::after {
+        bottom: 0;
+        background: linear-gradient(transparent, $secondary-accent-color);
+    }
 }
 
 .collapsed {