diff --git a/src/components/modal/modal.styles.ts b/src/components/modal/modal.styles.ts
index 9853f74196b3..d7ac17fda5c5 100644
--- a/src/components/modal/modal.styles.ts
+++ b/src/components/modal/modal.styles.ts
@@ -41,12 +41,14 @@ export const euiModalStyles = (euiThemeContext: UseEuiTheme) => {
 
       ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
         position: fixed;
-        inline-size: 100vw;
-        min-inline-size: 0;
-        max-inline-size: none;
-        max-block-size: 100vh;
         inset: 0;
         border-radius: 0;
+        // The below importants are required to override any
+        // inline width/heights that consumers set via {style}
+        inline-size: 100vw !important;
+        min-inline-size: 0 !important;
+        max-inline-size: none !important;
+        max-block-size: 100vh !important;
       }
 
       // Remove the outline from the focusable container