diff --git a/packages/calcite-components/src/components/popover/popover.e2e.ts b/packages/calcite-components/src/components/popover/popover.e2e.ts
index fe7eeda52df..96d721e5a78 100644
--- a/packages/calcite-components/src/components/popover/popover.e2e.ts
+++ b/packages/calcite-components/src/components/popover/popover.e2e.ts
@@ -838,6 +838,10 @@ describe("calcite-popover", () => {
             shadowSelector: `.${CSS.container}`,
             targetProp: "borderRadius",
           },
+          "--calcite-popover-max-size-x": {
+            shadowSelector: `.${CSS.positionContainer}`,
+            targetProp: "maxInlineSize",
+          },
           "--calcite-popover-text-color": [
             {
               shadowSelector: `.${CSS.heading}`,
diff --git a/packages/calcite-components/src/components/popover/popover.scss b/packages/calcite-components/src/components/popover/popover.scss
index fe44987c0ac..e81bf209629 100644
--- a/packages/calcite-components/src/components/popover/popover.scss
+++ b/packages/calcite-components/src/components/popover/popover.scss
@@ -6,6 +6,7 @@
  * @prop --calcite-popover-background-color: Specifies the component's background color.
  * @prop --calcite-popover-border-color: Specifies the component's border color.
  * @prop --calcite-popover-corner-radius: Specifies the component's corner radius.
+ * @prop --calcite-popover-max-size-x: Specifies the component's maximum width.
  * @prop --calcite-popover-text-color: Specifies the component's text color.
  * @prop --calcite-popover-z-index: Specifies the component's z-index value.
  */
@@ -17,6 +18,7 @@
 
 .position-container {
   @include floating-ui-container();
+  max-inline-size: var(--calcite-popover-max-size-x, 100vw);
 }
 
 @include floating-ui-elem-anim(".position-container");
diff --git a/packages/calcite-components/src/custom-theme/popover.ts b/packages/calcite-components/src/custom-theme/popover.ts
index 0c2083efd7b..af8058cb5db 100644
--- a/packages/calcite-components/src/custom-theme/popover.ts
+++ b/packages/calcite-components/src/custom-theme/popover.ts
@@ -4,6 +4,7 @@ export const popoverTokens = {
   calcitePopoverBackgroundColor: "",
   calcitePopoverBorderColor: "",
   calcitePopoverCornerRadius: "",
+  calcitePopoverMaxSizeX: "",
   calcitePopoverTextColor: "",
   calcitePopoverZIndex: "",
 };