diff --git a/packages/mui-material/src/OutlinedInput/NotchedOutline.js b/packages/mui-material/src/OutlinedInput/NotchedOutline.js
index ac8e235a49cef2..1a4551b5d0fffc 100644
--- a/packages/mui-material/src/OutlinedInput/NotchedOutline.js
+++ b/packages/mui-material/src/OutlinedInput/NotchedOutline.js
@@ -70,7 +70,8 @@ const NotchedOutlineLegend = styled('legend', {
       {
         props: ({ ownerState }) => ownerState.withLabel && ownerState.notched,
         style: {
-          maxWidth: '100%',
+          // Safari: avoid percentage max-width on <legend> inside <fieldset> in flex layouts.
+          maxWidth: 'none',
           transition: theme.transitions.create('max-width', {
             duration: 100,
             easing: theme.transitions.easing.easeOut,
diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js
index 8ef21c8d2292b1..bb4f711c0b1632 100644
--- a/packages/mui-material/src/Select/Select.test.js
+++ b/packages/mui-material/src/Select/Select.test.js
@@ -1261,9 +1261,9 @@ describe('<Select />', () => {
           </Select>,
         );
 
-        expect(container.querySelector('legend')).toHaveComputedStyle({
-          maxWidth: '100%',
-        });
+        expect(container.querySelector('legend').getBoundingClientRect().width).to.be.greaterThan(
+          1,
+        );
       },
     );
   });
diff --git a/packages/mui-material/src/TextField/TextField.test.js b/packages/mui-material/src/TextField/TextField.test.js
index 8edca2b41cf6f5..372af07925424d 100644
--- a/packages/mui-material/src/TextField/TextField.test.js
+++ b/packages/mui-material/src/TextField/TextField.test.js
@@ -6,6 +6,7 @@ import FormControl from '@mui/material/FormControl';
 import { inputBaseClasses } from '@mui/material/InputBase';
 import MenuItem from '@mui/material/MenuItem';
 import { outlinedInputClasses } from '@mui/material/OutlinedInput';
+import Stack from '@mui/material/Stack';
 import TextField, { textFieldClasses as classes } from '@mui/material/TextField';
 import describeConformance from '../../test/describeConformance';
 
@@ -223,6 +224,20 @@ describe('<TextField />', () => {
         });
       },
     );
+
+    it.skipIf(isJsdom())('should expand notch when focused inside a Stack layout', function test() {
+      const { container } = render(
+        <Stack spacing={2} sx={{ width: 300 }}>
+          <TextField label="First name" variant="outlined" />
+        </Stack>,
+      );
+
+      const input = screen.getByRole('textbox', { name: 'First name' });
+      fireEvent.focus(input);
+
+      const legend = container.querySelector('fieldset legend');
+      expect(legend.getBoundingClientRect().width).to.be.greaterThan(1);
+    });
   });
 
   describe('prop: InputProps', () => {
diff --git a/test/e2e/fixtures/TextField/OutlinedTextFieldInStack.tsx b/test/e2e/fixtures/TextField/OutlinedTextFieldInStack.tsx
new file mode 100644
index 00000000000000..17c5b533cfdd3e
--- /dev/null
+++ b/test/e2e/fixtures/TextField/OutlinedTextFieldInStack.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+
+export default function OutlinedTextFieldInStack() {
+  return (
+    <Stack spacing={2} sx={{ width: 300 }}>
+      <TextField id="outlined-in-stack" label="First name" variant="outlined" />
+    </Stack>
+  );
+}
diff --git a/test/e2e/index.test.ts b/test/e2e/index.test.ts
index cb727a47022593..d0ae77d27540ef 100644
--- a/test/e2e/index.test.ts
+++ b/test/e2e/index.test.ts
@@ -241,6 +241,19 @@ describe('e2e', () => {
       const errorSelector = page.locator('.MuiInputBase-root.Mui-error');
       await errorSelector.waitFor();
     });
+
+    it('should expand the notched outline when focused inside a Stack layout', async () => {
+      await renderFixture('TextField/OutlinedTextFieldInStack');
+
+      const input = page.getByRole('textbox', { name: 'First name' });
+      await input.click();
+
+      const notchWidth = await page
+        .locator('fieldset legend')
+        .evaluate((element) => element.getBoundingClientRect().width);
+
+      expect(notchWidth).toBeGreaterThan(1);
+    });
   });
 
   describe('<Select />', () => {