diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
index 0fab6d26..3c57cae1 100644
--- a/src/components/Button/Button.stories.tsx
+++ b/src/components/Button/Button.stories.tsx
@@ -157,3 +157,12 @@ export const BareDisabled: Story = {
     variant: 'bare',
   },
 };
+
+// should automatically fill the width of the container
+export const WithFlexContainer: Story = {
+  render: () => (
+    <div style={{ display: 'flex', width: '400px', flexDirection: 'column' }}>
+      <Button label="Button 1" />
+    </div>
+  ),
+};
diff --git a/src/components/Button/Button.styles.ts b/src/components/Button/Button.styles.ts
index 83386fff..e93af4cc 100644
--- a/src/components/Button/Button.styles.ts
+++ b/src/components/Button/Button.styles.ts
@@ -287,7 +287,7 @@ const commonConfig = {
   display: 'inline-flex',
   borderRadius: '$border-radius-large',
   gap: '$space-component-gap-small',
-  w: 'fit-content',
+  w: 'auto',
   justifyContent: 'center',
   alignItems: 'center',
   textAlign: 'center',
diff --git a/src/components/Button/stylesBuilder/stylesBuilder.test.ts b/src/components/Button/stylesBuilder/stylesBuilder.test.ts
index 49470c74..921b0536 100644
--- a/src/components/Button/stylesBuilder/stylesBuilder.test.ts
+++ b/src/components/Button/stylesBuilder/stylesBuilder.test.ts
@@ -54,7 +54,7 @@ describe('stylesBuilder', () => {
         textAlign: 'center',
         transition: true,
         transitionDuration: 200,
-        w: 'fit-content',
+        w: 'auto',
         whiteSpace: 'nowrap',
       },
       loader: {