diff --git a/app/assets/javascripts/behaviors/markdown/render_sandboxed_mermaid.js b/app/assets/javascripts/behaviors/markdown/render_sandboxed_mermaid.js
index 92cdd1c600ff65b79d54d9bcf5584a0cfe5cad4d..b9e4c7b68b00261bc12ff27d5e70128ffda50f6b 100644
--- a/app/assets/javascripts/behaviors/markdown/render_sandboxed_mermaid.js
+++ b/app/assets/javascripts/behaviors/markdown/render_sandboxed_mermaid.js
@@ -31,6 +31,7 @@ const MAX_CHAR_LIMIT = 2000;
 const MAX_MERMAID_BLOCK_LIMIT = 50;
 // Max # of `&` allowed in Chaining of links syntax
 const MAX_CHAINING_OF_LINKS_LIMIT = 30;
+const BUFFER_IFRAME_HEIGHT = 10;
 // Keep a map of mermaid blocks we've already rendered.
 const elsProcessingMap = new WeakMap();
 let renderedMermaidBlocks = 0;
@@ -117,9 +118,9 @@ function renderMermaidEl(el, source) {
       if (event.origin !== 'null' || event.source !== iframeEl.contentWindow) {
         return;
       }
-      const { h, w } = event.data;
-      iframeEl.width = w;
-      iframeEl.height = h;
+      const { h } = event.data;
+      iframeEl.width = '100%';
+      iframeEl.height = `${h + BUFFER_IFRAME_HEIGHT}px`;
     },
     false,
   );