diff --git a/docs/src/pages/components/CodeSnippet.svx b/docs/src/pages/components/CodeSnippet.svx
index 0eaffda1..d86f3894 100644
--- a/docs/src/pages/components/CodeSnippet.svx
+++ b/docs/src/pages/components/CodeSnippet.svx
@@ -51,6 +51,20 @@ let comment = `
 
 <CodeSnippet wrapText type="multi" code="{comment}" />
 
+### Dynamic multi-line code
+
+For dynamically updated code, you must use the `code` prop instead of the default slot.
+
+<FileSource src="/framed/CodeSnippet/DynamicCodeSnippet" />
+
+### Hidden multi-line code
+
+There may be cases where your code snippet is hidden in the DOM. The logic to render the "Show more" button relies on the element's computed height. For hidden content, the button will not appear because the computed height is `0`.
+
+The recommended workaround is to re-render the component. See the example below.
+
+<FileSource src="/framed/CodeSnippet/HiddenCodeSnippet" />
+
 ### Skeleton
 
 The default skeleton type is `"single"`.
diff --git a/docs/src/pages/framed/CodeSnippet/DynamicCodeSnippet.svelte b/docs/src/pages/framed/CodeSnippet/DynamicCodeSnippet.svelte
new file mode 100644
index 00000000..30332096
--- /dev/null
+++ b/docs/src/pages/framed/CodeSnippet/DynamicCodeSnippet.svelte
@@ -0,0 +1,15 @@
+<script>
+  import { ToggleSmall, CodeSnippet } from "carbon-components-svelte";
+
+  let toggled = false;
+
+  $: length = toggled ? 20 : 10;
+  $: code = Array.from({ length }, (_, i) => i + 1).join("\n");
+</script>
+
+<ToggleSmall
+  style="margin-bottom: var(--cds-spacing-05)"
+  labelText="Trigger snippet overflow"
+  bind:toggled
+/>
+<CodeSnippet type="multi" code="{code}" />
diff --git a/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte b/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte
new file mode 100644
index 00000000..93251d83
--- /dev/null
+++ b/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte
@@ -0,0 +1,34 @@
+<script>
+  import { ToggleSmall, CodeSnippet } from "carbon-components-svelte";
+
+  let toggled = false;
+
+  const code = Array.from({ length: 20 }, (_, i) => i + 1).join("\n");
+</script>
+
+<style>
+  .hidden {
+    display: none;
+  }
+</style>
+
+<ToggleSmall
+  style="margin-bottom: var(--cds-spacing-05)"
+  labelText="Show code snippets"
+  bind:toggled
+/>
+
+{#if toggled}
+  <h5>"Show more" will not render</h5><br />
+{/if}
+<div class:hidden="{!toggled}">
+  <CodeSnippet type="multi" code="{code}" />
+</div>
+
+{#if toggled}
+  <br /><br />
+  <h5>"Show more" will render</h5><br />
+  <div class:hidden="{!toggled}">
+    <CodeSnippet type="multi" code="{code}" />
+  </div>
+{/if}
diff --git a/src/CodeSnippet/CodeSnippet.svelte b/src/CodeSnippet/CodeSnippet.svelte
index 0061cb84..0d3c52f8 100644
--- a/src/CodeSnippet/CodeSnippet.svelte
+++ b/src/CodeSnippet/CodeSnippet.svelte
@@ -99,15 +99,22 @@
    */
   export let ref = null;
 
+  import { tick } from "svelte";
   import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
   import { Button } from "../Button";
   import { Copy } from "../Copy";
   import { CopyButton } from "../CopyButton";
   import CodeSnippetSkeleton from "./CodeSnippet.Skeleton.svelte";
 
+  function setShowMoreLess() {
+    const { height } = ref.getBoundingClientRect();
+    if (height > 0) showMoreLess = ref.getBoundingClientRect().height > 255;
+  }
+
   $: expandText = expanded ? showLessText : showMoreText;
   $: if (type === "multi" && ref) {
-    showMoreLess = ref.getBoundingClientRect().height > 255;
+    if (code === undefined) setShowMoreLess();
+    if (code) tick().then(setShowMoreLess);
   }
 </script>