diff --git a/web/packages/teleport/src/DesktopSession/DesktopSession.tsx b/web/packages/teleport/src/DesktopSession/DesktopSession.tsx
index 05cdd3f5436bf..051026cad56a2 100644
--- a/web/packages/teleport/src/DesktopSession/DesktopSession.tsx
+++ b/web/packages/teleport/src/DesktopSession/DesktopSession.tsx
@@ -291,7 +291,6 @@ function Session({
       <TdpClientCanvas
         style={{
           display: displayCanvas ? 'flex' : 'none',
-          flex: 1, // ensures the canvas fills available screen space
         }}
         tdpCli={tdpClient}
         tdpCliInit={initTdpCli}
diff --git a/web/packages/teleport/src/DesktopSession/__snapshots__/DesktopSession.story.test.tsx.snap b/web/packages/teleport/src/DesktopSession/__snapshots__/DesktopSession.story.test.tsx.snap
index ae7de58c39b39..cc998ede42b87 100644
--- a/web/packages/teleport/src/DesktopSession/__snapshots__/DesktopSession.story.test.tsx.snap
+++ b/web/packages/teleport/src/DesktopSession/__snapshots__/DesktopSession.story.test.tsx.snap
@@ -511,7 +511,7 @@ exports[`connected settings false 1`] = `
       </div>
     </nav>
     <canvas
-      style="display: flex; flex: 1;"
+      style="display: flex;"
     />
   </div>
 </div>
@@ -812,7 +812,7 @@ exports[`connected settings true 1`] = `
       </div>
     </nav>
     <canvas
-      style="display: flex; flex: 1;"
+      style="display: flex;"
     />
   </div>
 </div>
@@ -1331,7 +1331,7 @@ exports[`disconnected 1`] = `
       </div>
     </div>
     <canvas
-      style="display: none; flex: 1;"
+      style="display: none;"
     />
   </div>
 </div>
@@ -2035,7 +2035,7 @@ exports[`processing 1`] = `
       class="c12"
     />
     <canvas
-      style="display: none; flex: 1;"
+      style="display: none;"
     />
   </div>
 </div>
@@ -2345,7 +2345,7 @@ exports[`tdp processing 1`] = `
       class="c12"
     />
     <canvas
-      style="display: none; flex: 1;"
+      style="display: none;"
     />
   </div>
 </div>
diff --git a/web/packages/teleport/src/DesktopSession/useTdpClientCanvas.tsx b/web/packages/teleport/src/DesktopSession/useTdpClientCanvas.tsx
index e69b22dcdc72e..ad4c110586e89 100644
--- a/web/packages/teleport/src/DesktopSession/useTdpClientCanvas.tsx
+++ b/web/packages/teleport/src/DesktopSession/useTdpClientCanvas.tsx
@@ -66,18 +66,26 @@ export default function useTdpClientCanvas(props: Props) {
     setTdpClient(new TdpClient(addr));
   }, [clusterId, username, desktopName]);
 
-  const syncCanvasSizeToDisplaySize = (canvas: HTMLCanvasElement) => {
+  const syncCanvasResolutionAndSize = (canvas: HTMLCanvasElement) => {
     const { width, height } = getDisplaySize();
 
+    // Set a fixed canvas resolution and display size. This ensures
+    // that neither of these change when the user resizes the browser
+    // window. Instead, the canvas will remain the same size and the
+    // browser will add scrollbars if necessary. This is the behavior
+    // we want until https://github.com/gravitational/teleport/issues/9702
+    // is resolved.
     canvas.width = width;
     canvas.height = height;
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
   };
 
   // Default TdpClientEvent.TDP_PNG_FRAME handler (buffered)
   const onPngFrame = (ctx: CanvasRenderingContext2D, pngFrame: PngFrame) => {
     // The first image fragment we see signals a successful tdp connection.
     if (!initialTdpConnectionSucceeded.current) {
-      syncCanvasSizeToDisplaySize(ctx.canvas);
+      syncCanvasResolutionAndSize(ctx.canvas);
       setTdpConnection({ status: 'success' });
       initialTdpConnectionSucceeded.current = true;
     }