diff --git a/.changeset/bright-avatars-shrink.md b/.changeset/bright-avatars-shrink.md
new file mode 100644
index 00000000000..5920620c3c5
--- /dev/null
+++ b/.changeset/bright-avatars-shrink.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Avatar: prevent avatar images from shrinking below their configured size in constrained layouts.
diff --git a/e2e/components/Avatar.test.ts b/e2e/components/Avatar.test.ts
index 00d706cc0e1..e2e498eed80 100644
--- a/e2e/components/Avatar.test.ts
+++ b/e2e/components/Avatar.test.ts
@@ -11,6 +11,11 @@ const stories = [
     title: 'Size',
     id: 'components-avatar-features--size',
   },
+  {
+    title: 'CSS Size Override Regression',
+    id: 'components-avatar-dev--css-size-override-regression',
+    expectedSize: 16,
+  },
   {
     title: 'Size Responsive',
     id: 'components-avatar-features--size-responsive',
@@ -34,8 +39,14 @@ test.describe('Avatar', () => {
               },
             })
 
-            // Default state
-            await expect(page).toHaveScreenshot(`Avatar.${story.title}.${theme}.png`)
+            if ('expectedSize' in story) {
+              const avatar = page.getByRole('img')
+              await expect(avatar).toHaveCSS('width', `${story.expectedSize}px`)
+              await expect(avatar).toHaveCSS('height', `${story.expectedSize}px`)
+            } else {
+              // Default state
+              await expect(page).toHaveScreenshot(`Avatar.${story.title}.${theme}.png`)
+            }
           })
         })
       }
diff --git a/packages/react/src/Avatar/Avatar.dev.stories.tsx b/packages/react/src/Avatar/Avatar.dev.stories.tsx
new file mode 100644
index 00000000000..cd9e2e0401a
--- /dev/null
+++ b/packages/react/src/Avatar/Avatar.dev.stories.tsx
@@ -0,0 +1,19 @@
+import Avatar from './Avatar'
+
+export default {
+  title: 'Components/Avatar/Dev',
+}
+
+// Regression fixture: consumer CSS overrides must remain exact in constrained flex layouts.
+export const CSSSizeOverrideRegression = () => (
+  <div style={{display: 'flex', width: 8, '--avatar-size': '16px'} as React.CSSProperties}>
+    <Avatar
+      alt="mona"
+      src="https://avatars.githubusercontent.com/u/7143434?v=4"
+      style={{
+        width: 'var(--avatar-size)',
+        height: 'var(--avatar-size)',
+      }}
+    />
+  </div>
+)
diff --git a/packages/react/src/Avatar/Avatar.module.css b/packages/react/src/Avatar/Avatar.module.css
index fc67531b9a7..3f92e98f2a9 100644
--- a/packages/react/src/Avatar/Avatar.module.css
+++ b/packages/react/src/Avatar/Avatar.module.css
@@ -1,6 +1,7 @@
 :where(.Avatar) {
   display: inline-block;
   width: var(--avatarSize-regular);
+  flex-shrink: 0;
   height: var(--avatarSize-regular);
   overflow: hidden; /* Ensure page layout in Firefox should images fail to load */
   /* stylelint-disable-next-line primer/typography */