diff --git a/packages/mui-material/src/Fab/Fab.js b/packages/mui-material/src/Fab/Fab.js
index 2c2e5997d5b45a..42102d9797e678 100644
--- a/packages/mui-material/src/Fab/Fab.js
+++ b/packages/mui-material/src/Fab/Fab.js
@@ -103,31 +103,34 @@ const FabRoot = styled(ButtonBase, {
         props: { variant: 'extended' },
         style: {
           borderRadius: 48 / 2,
-          padding: '0 16px',
+          // Vertical padding and a content-sized height rather than a fixed
+          // height, so a label that wraps stays inside the button. `fit-content`
+          // rather than `auto` keeps a flex or grid parent from stretching it.
+          padding: '8px 16px',
           width: 'auto',
-          minHeight: 'auto',
+          height: 'fit-content',
           minWidth: 48,
-          height: 48,
+          minHeight: 48,
         },
       },
       {
         props: { variant: 'extended', size: 'small' },
         style: {
           width: 'auto',
-          padding: '0 8px',
+          padding: '2px 8px',
           borderRadius: 34 / 2,
           minWidth: 34,
-          height: 34,
+          minHeight: 34,
         },
       },
       {
         props: { variant: 'extended', size: 'medium' },
         style: {
           width: 'auto',
-          padding: '0 16px',
+          padding: '4px 16px',
           borderRadius: 40 / 2,
           minWidth: 40,
-          height: 40,
+          minHeight: 40,
         },
       },
       {
diff --git a/packages/mui-material/src/Fab/Fab.test.js b/packages/mui-material/src/Fab/Fab.test.js
index d1ff7dd41f8372..b21dec2ccf8030 100644
--- a/packages/mui-material/src/Fab/Fab.test.js
+++ b/packages/mui-material/src/Fab/Fab.test.js
@@ -97,6 +97,59 @@ describe('<Fab />', () => {
     expect(button).to.have.class(classes.sizeMedium);
   });
 
+  // JSDOM does no layout, so the one-line heights are only measurable in a real
+  // browser. The content is 1.75em tall whatever the font family, so these are
+  // the minimums rather than anything font-dependent.
+  it.skipIf(isJsdom())('keeps the one-line height of each extended size', () => {
+    render(
+      <React.Fragment>
+        <Fab variant="extended" data-testid="large">
+          Save
+        </Fab>
+        <Fab variant="extended" size="medium" data-testid="medium">
+          Save
+        </Fab>
+        <Fab variant="extended" size="small" data-testid="small">
+          Save
+        </Fab>
+      </React.Fragment>,
+    );
+
+    expect(screen.getByTestId('large').getBoundingClientRect().height).to.equal(48);
+    expect(screen.getByTestId('medium').getBoundingClientRect().height).to.equal(40);
+    expect(screen.getByTestId('small').getBoundingClientRect().height).to.equal(34);
+  });
+
+  it.skipIf(isJsdom())('does not stretch to fill a flex parent', () => {
+    render(
+      <div style={{ display: 'flex', height: 160 }}>
+        <Fab variant="extended">Save</Fab>
+      </div>,
+    );
+
+    expect(screen.getByRole('button').getBoundingClientRect().height).to.equal(48);
+  });
+
+  // JSDOM does no layout, so the overflow this guards against is only visible
+  // in a real browser.
+  it.skipIf(isJsdom())('keeps a wrapping label inside the extended button', () => {
+    render(
+      <div style={{ width: 120 }}>
+        <Fab variant="extended">
+          <span data-testid="label">Create new deployment</span>
+        </Fab>
+      </div>,
+    );
+
+    const fab = screen.getByRole('button').getBoundingClientRect();
+    const label = screen.getByTestId('label').getBoundingClientRect();
+
+    // The button grew past its one-line height, so the label wrapped.
+    expect(fab.height).to.be.greaterThan(48);
+    expect(label.top).to.be.at.least(fab.top);
+    expect(label.bottom).to.be.at.most(fab.bottom);
+  });
+
   it('should have a ripple', async () => {
     const { container } = render(<Fab>Fab</Fab>);
     await ripple.startTouch(screen.getByRole('button'));