diff --git a/client/src/components/Lobby/index.jsx b/client/src/components/Lobby/index.jsx
index ef8f480..a7a7ced 100644
--- a/client/src/components/Lobby/index.jsx
+++ b/client/src/components/Lobby/index.jsx
@@ -44,11 +44,14 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: 'column',
     flexGrow: 1,
     height: '100%',
+    minHeight: 0,
   },
   roomList: {
     display: 'flex',
     flexDirection: 'column',
     flexGrow: 1,
+    height: '100%',
+    minHeight: 0,
   },
   roomListContainer: {
     display: 'flex',
@@ -79,10 +82,12 @@ const useStyles = makeStyles((theme) => ({
     display: 'flex',
     flexDirection: 'column',
     flexGrow: 1,
+    height: '100%',
   },
   flexGrow: {
     display: 'flex',
     flexGrow: 1,
+    minHeight: 0,
   },
   bottomNav: {
     width: '100%',
@@ -147,6 +152,7 @@ function Lobby({
         >
           <div
             className={classes.roomListContainer}
+            data-testid="room-list-scroll-container"
           >
             <Container
               maxWidth="md"
diff --git a/client/src/components/Navigation.jsx b/client/src/components/Navigation.jsx
index 048a2ed..da48d79 100644
--- a/client/src/components/Navigation.jsx
+++ b/client/src/components/Navigation.jsx
@@ -140,6 +140,7 @@ const useStyles = makeStyles((theme) => ({
   content: {
     display: 'flex',
     flexGrow: 1,
+    minHeight: 0,
     flexDirection: 'column',
   },
 }));
diff --git a/cypress/e2e/local_stack.cy.js b/cypress/e2e/local_stack.cy.js
index 4756a3b..a234a4c 100644
--- a/cypress/e2e/local_stack.cy.js
+++ b/cypress/e2e/local_stack.cy.js
@@ -53,6 +53,25 @@ describe('local app stack', () => {
     });
   });
 
+  it('scrolls the room list when it exceeds the viewport', () => {
+    cy.viewport(800, 500);
+    cy.visit('/');
+
+    cy.get('[data-testid="room-list-scroll-container"]', { timeout: 10000 })
+      .then(($roomList) => {
+        const filler = $roomList[0].ownerDocument.createElement('div');
+        filler.style.flex = '0 0 1000px';
+        $roomList[0].appendChild(filler);
+      })
+      .should(($roomList) => {
+        expect($roomList[0].scrollHeight).to.be.greaterThan($roomList[0].clientHeight);
+      })
+      .scrollTo('bottom')
+      .should(($roomList) => {
+        expect($roomList[0].scrollTop).to.be.greaterThan(0);
+      });
+  });
+
   it('renders markdown announcements in the lobby', () => {
     cy.intercept('GET', '**/api/announcements', '[Docs](https://example.com)').as('announcements');