diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.scss b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
index 64ad6e2bd1d..e79b1e20f41 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.scss
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
@@ -188,6 +188,10 @@
   }
 }
 
+:host([layout="vertical"]) {
+  @apply w-full;
+}
+
 :host([layout="vertical"]) .container {
   @apply border-color-3
   mx-0
diff --git a/packages/calcite-components/src/components/stepper/stepper.stories.ts b/packages/calcite-components/src/components/stepper/stepper.stories.ts
index 16c2df37218..812b37e28d8 100644
--- a/packages/calcite-components/src/components/stepper/stepper.stories.ts
+++ b/packages/calcite-components/src/components/stepper/stepper.stories.ts
@@ -296,3 +296,22 @@ export const horizontalSingleLayout_TestOnly = (): string => html`
     </calcite-stepper>
   </div>
 `;
+
+export const verticalLayoutFullWidth = (): string =>
+  html`<calcite-stepper layout="vertical" scale="s" style="width: 1000px;">
+      <calcite-stepper-item heading="Scale s" description="Add members without sending invitations"
+        >Step 1 Content Goes Here</calcite-stepper-item
+      >
+    </calcite-stepper>
+
+    <calcite-stepper layout="vertical">
+      <calcite-stepper-item heading="Scale m" description="Add members without sending invitations"
+        >Step 1 Content Goes Here</calcite-stepper-item
+      >
+    </calcite-stepper>
+
+    <calcite-stepper layout="vertical" scale="l">
+      <calcite-stepper-item heading="Scale l" description="Add members without sending invitations"
+        >Step 1 Content Goes Here</calcite-stepper-item
+      >
+    </calcite-stepper>`;