diff --git a/core/scripts/testing/styles.css b/core/scripts/testing/styles.css
index d08fee4437c..e2484407e51 100644
--- a/core/scripts/testing/styles.css
+++ b/core/scripts/testing/styles.css
@@ -74,6 +74,15 @@ main button:not([class*="sc-ion-"]) {
   margin: 8px 0;
 }
 
+/** 
+ * Danger style for buttons.
+ */
+ion-content button.red:not([class*="sc-ion-"]),
+main button.red:not([class*="sc-ion-"]) {
+  background: #ea445a;
+  border-color: #a82f40;
+}
+
 /**
  * Button styles should only be applied
  * to native buttons that are not part of the
diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx
index b0673b414d5..c71a926033b 100644
--- a/core/src/components/content/content.tsx
+++ b/core/src/components/content/content.tsx
@@ -46,8 +46,10 @@ export class Content implements ComponentInterface {
   private scrollEl?: HTMLElement;
   private backgroundContentEl?: HTMLElement;
   private isMainContent = true;
+  private sizeToContent = false;
   private resizeTimeout: ReturnType<typeof setTimeout> | null = null;
   private fullscreenResizeObserver?: ResizeObserver;
+  private sizeToContentObserver?: MutationObserver;
   private inheritedAttributes: Attributes = {};
 
   private tabsElement: HTMLElement | null = null;
@@ -190,6 +192,7 @@ export class Content implements ComponentInterface {
 
     // Re-observe on reattach, since componentDidLoad only fires once.
     this.setupFullscreenResizeObserver();
+    this.setupSizeToContentObserver();
   }
 
   componentDidLoad() {
@@ -222,6 +225,7 @@ export class Content implements ComponentInterface {
     }
 
     this.destroyFullscreenResizeObserver();
+    this.destroySizeToContentObserver();
   }
 
   /**
@@ -258,6 +262,51 @@ export class Content implements ComponentInterface {
     this.fullscreenResizeObserver.observe(this.el);
   }
 
+  /**
+   * A modal's `--height` can be changed at runtime with no event to react to,
+   * either by setting the property directly or by toggling a class that changes
+   * which rule wins. Both of those mutate an attribute on the modal, so watch
+   * for that and re-evaluate. Viewport driven changes are already covered by
+   * the `resize` listener.
+   */
+  private setupSizeToContentObserver() {
+    if (!Build.isBrowser || typeof MutationObserver === 'undefined') {
+      return;
+    }
+
+    if (this.sizeToContentObserver !== undefined) {
+      return;
+    }
+
+    const modal = this.el.closest('ion-modal');
+    if (modal === null) {
+      return;
+    }
+
+    this.sizeToContentObserver = new MutationObserver(() => this.updateSizeToContent());
+    this.sizeToContentObserver.observe(modal, { attributes: true, attributeFilter: ['style', 'class'] });
+  }
+
+  private destroySizeToContentObserver() {
+    if (this.sizeToContentObserver !== undefined) {
+      this.sizeToContentObserver.disconnect();
+      this.sizeToContentObserver = undefined;
+    }
+  }
+
+  /**
+   * Re-renders when the overlay is no longer sized the way the last render
+   * assumed. Read in a `readTask` because resolving the custom property forces
+   * a style recalculation.
+   */
+  private updateSizeToContent() {
+    readTask(() => {
+      if (this.shouldSizeToContent() !== this.sizeToContent) {
+        forceUpdate(this);
+      }
+    });
+  }
+
   private destroyFullscreenResizeObserver() {
     if (this.fullscreenResizeObserver !== undefined) {
       this.fullscreenResizeObserver.disconnect();
@@ -310,6 +359,34 @@ export class Content implements ComponentInterface {
     return forceOverscroll === undefined ? mode === 'ios' && isPlatform('ios') : forceOverscroll;
   }
 
+  /**
+   * Whether this component should size itself to its contents height, which
+   * is the case inside any popover and inside a modal whose `--height` is a
+   * content-based value. Those overlays give the content no definite height
+   * to fill.
+   */
+  private shouldSizeToContent() {
+    if (hostContext('ion-popover', this.el)) {
+      return true;
+    }
+
+    const modal = this.el.closest('ion-modal');
+    if (modal === null) {
+      return false;
+    }
+
+    const height = getComputedStyle(modal).getPropertyValue('--height').trim();
+
+    /**
+     * Compared as a suffix so a value carrying only a vendor prefix is still
+     * recognized, such as the `-moz-fit-content` that Firefox needs before 94.
+     *
+     * TODO: replace with `CONTENT_SIZED_HEIGHTS.includes(height)` once the
+     * oldest supported Firefox is 94 or higher.
+     */
+    return CONTENT_SIZED_HEIGHTS.some((value) => height.endsWith(value));
+  }
+
   private resize() {
     /**
      * Only force update if the component is rendered in a browser context.
@@ -320,6 +397,13 @@ export class Content implements ComponentInterface {
      * TODO: Remove if STENCIL-834 determines Stencil will account for this.
      */
     if (Build.isBrowser) {
+      /**
+       * A window resize can cross a media query that changes the modal's
+       * `--height`. The content's own offsets are unchanged, so neither branch
+       * below re-renders and the class from the last render would go stale.
+       */
+      this.updateSizeToContent();
+
       if (this.fullscreen) {
         readTask(() => this.readDimensions());
       } else if (this.cTop !== 0 || this.cBottom !== 0) {
@@ -538,7 +622,7 @@ export class Content implements ComponentInterface {
         class={createColorClasses(this.color, {
           [mode]: true,
           'content-fullscreen': this.fullscreen,
-          'content-sizing': hostContext('ion-popover', this.el),
+          'content-sizing': (this.sizeToContent = this.shouldSizeToContent()),
           overscroll: forceOverscroll,
           [`content-${rtl}`]: true,
         })}
@@ -579,6 +663,12 @@ export class Content implements ComponentInterface {
   }
 }
 
+/**
+ * `ion-modal` `--height` values that size the modal to its contents, leaving
+ * children an indefinite height to resolve against.
+ */
+const CONTENT_SIZED_HEIGHTS = ['auto', 'fit-content', 'min-content', 'max-content'];
+
 const getParentElement = (el: any) => {
   if (el.parentElement) {
     // normal element with a parent element
diff --git a/core/src/components/modal/modal.scss b/core/src/components/modal/modal.scss
index 0df4a448cd3..a55e456bb0f 100644
--- a/core/src/components/modal/modal.scss
+++ b/core/src/components/modal/modal.scss
@@ -27,7 +27,12 @@
   --max-width: auto;
   --height: 100%;
   --min-height: auto;
-  --max-height: auto;
+  /**
+   * Clamps a content-sized `--height` (auto, fit-content, ...) to the 
+   * overlay, giving the wrapper's flex children something to shrink 
+   * toward so `ion-content` scrolls instead of overflowing.
+   */
+  --max-height: 100%;
   --overflow: hidden;
   --border-radius: 0;
   --border-width: 0;
@@ -87,8 +92,16 @@ ion-backdrop {
 /**
  * The wrapper receives programmatic focus for screen readers but should not
  * show a visible focus ring, which is meant only for keyboard navigation.
+ *
+ * A flex layout is required for the wrapper to size itself to its content
+ * when the modal is content-sized (`--height` is auto, fit-content, ...).
+ * This makes it so that the content can scroll when it overflows the wrapper.
  */
 .modal-wrapper {
+  display: flex;
+
+  flex-direction: column;
+
   outline: none;
 }
 
diff --git a/core/src/components/modal/test/content-height/index.html b/core/src/components/modal/test/content-height/index.html
new file mode 100644
index 00000000000..6288d04b02a
--- /dev/null
+++ b/core/src/components/modal/test/content-height/index.html
@@ -0,0 +1,399 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Modal - Content Height</title>
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta
+      name="viewport"
+      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <script>
+      /* Page two is taller than page one, to show the modal resize on navigation. */
+      class NavPageOne extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>Page One</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content class="ion-padding">
+              <p>Short first page.</p>
+              <ion-nav-link router-direction="forward" component="nav-page-two">
+                <button id="go-page-two">Go to Page Two</button>
+              </ion-nav-link>
+            </ion-content>
+          `;
+        }
+      }
+
+      class NavPageTwo extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
+            <ion-header>
+              <ion-toolbar>
+                <ion-buttons slot="start">
+                  <ion-back-button></ion-back-button>
+                </ion-buttons>
+                <ion-title>Page Two</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content class="ion-padding">
+              <div id="tall-block" style="height: 320px; background: #d0e6ff"></div>
+            </ion-content>
+          `;
+        }
+      }
+
+      class NavHost extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
+            <ion-content>
+              <ion-nav root="nav-page-one"></ion-nav>
+            </ion-content>
+          `;
+        }
+      }
+
+      customElements.define('nav-page-one', NavPageOne);
+      customElements.define('nav-page-two', NavPageTwo);
+      customElements.define('nav-host', NavHost);
+    </script>
+
+    <style>
+      /** 
+       * Shared modal styles. Only the height differs 
+       * between the modal examples. 
+       */
+      ion-modal {
+        --width: fit-content;
+        --min-width: 250px;
+        --border-radius: 6px;
+        --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
+      }
+
+      /**
+       * Content-based Heights
+       * --------------------------------------------------
+       * Each of these sizes the modal from its contents. 
+       */
+      ion-modal#fit-content-modal {
+        --height: fit-content;
+      }
+
+      ion-modal#auto-modal {
+        --height: auto;
+      }
+
+      ion-modal#min-content-modal {
+        --height: min-content;
+      }
+
+      ion-modal#max-content-modal {
+        --height: max-content;
+      }
+
+      /**
+       * Definite Heights
+       * --------------------------------------------------
+       * A definite height is not sized from its contents, 
+       * so the content is free to overflow.
+       */
+      ion-modal#px-modal {
+        --height: 300px;
+      }
+
+      /**
+       * Taller than the overlay. The default `--max-height: 100%` clamps this,
+       * where before it would run off screen.
+       */
+      ion-modal#px-tall-modal {
+        --height: 2000px;
+      }
+
+      /**
+       * Overflowing Content
+       * --------------------------------------------------
+       * A content-sized modal with overflowing content. 
+       * The default `--max-height: 100%` clamps this, where 
+       * before it would run off screen.
+       */
+      ion-modal#long-modal {
+        --height: fit-content;
+      }
+
+      /* The same long list with a max height. */
+      ion-modal#long-max-height-modal {
+        --height: fit-content;
+        --max-height: 50%;
+      }
+
+      /**
+       * Other Content-based Cases
+       * --------------------------------------------------
+       */
+
+      /**
+       * A content-sized modal containing an `ion-nav` must be handled 
+       * differently because a nav uses `position: absolute` by default.
+       */
+      ion-modal#nav-modal {
+        --height: fit-content;
+      }
+
+      /**
+       * No `ion-content` at all. This does not require any special handling,
+       * but we want to make sure it did not regress.
+       */
+      ion-modal#no-content-modal {
+        --height: fit-content;
+      }
+
+      /**
+       * Known Gaps
+       * --------------------------------------------------
+       */
+
+      /**
+       * Known gap: `part="content"` is the same element that `--height` sizes,
+       * so this collapses exactly like the others, but the height keyword is
+       * not readable from the custom property and is therefore not detected.
+       * Expect a modal displaying only a header here.
+       */
+      ion-modal#part-modal::part(content) {
+        height: fit-content;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <div class="ion-page">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Modal - Content Height</ion-title>
+          </ion-toolbar>
+        </ion-header>
+
+        <ion-content class="ion-padding">
+          <h2>Content-based heights</h2>
+          <button class="expand" id="open-fit-content">--height: fit-content</button>
+          <button class="expand" id="open-auto">--height: auto</button>
+          <button class="expand" id="open-min-content">--height: min-content</button>
+          <button class="expand" id="open-max-content">--height: max-content</button>
+
+          <h2>Definite heights</h2>
+          <button class="expand" id="open-default">default height</button>
+          <button class="expand" id="open-px">--height: 300px</button>
+          <button class="expand" id="open-px-tall">--height: 2000px (taller than screen)</button>
+
+          <h2>Overflowing content</h2>
+          <button class="expand" id="open-long">--height: fit-content, overflowing</button>
+          <button class="expand" id="open-long-max-height">--height: fit-content, overflowing, max height</button>
+
+          <h2>Other content-based cases</h2>
+          <button class="expand" id="open-nav">--height: fit-content, ion-nav</button>
+          <button class="expand" id="open-no-content">--height: fit-content, no ion-content</button>
+          <button class="expand" id="open-toggle">--height: toggled at runtime</button>
+
+          <h2>Known gaps</h2>
+          <button class="expand red" id="open-part" color="danger">::part(content)</button>
+
+          <ion-modal id="fit-content-modal" trigger="open-fit-content">
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>fit-content</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content>
+              <div class="wrapper"><ion-list class="short" lines="none"></ion-list></div>
+            </ion-content>
+          </ion-modal>
+
+          <ion-modal id="auto-modal" trigger="open-auto">
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>auto</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content>
+              <div class="wrapper"><ion-list class="short" lines="none"></ion-list></div>
+            </ion-content>
+          </ion-modal>
+
+          <ion-modal id="min-content-modal" trigger="open-min-content">
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>min-content</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content>
+              <div class="wrapper"><ion-list class="short" lines="none"></ion-list></div>
+            </ion-content>
+          </ion-modal>
+
+          <ion-modal id="max-content-modal" trigger="open-max-content">
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>max-content</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content>
+              <div class="wrapper"><ion-list class="short" lines="none"></ion-list></div>
+            </ion-content>
+          </ion-modal>
+
+          <!-- Control: the default modal must fill the screen height. -->
+          <ion-modal id="default-modal" trigger="open-default">
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>default height</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content>
+              <div class="wrapper"><ion-list class="short" lines="none"></ion-list></div>
+            </ion-content>
+          </ion-modal>
+
+          <ion-modal id="px-modal" trigger="open-px">
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>300px</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content>
+              <div class="wrapper"><ion-list class="long" lines="none"></ion-list></div>
+            </ion-content>
+          </ion-modal>
+
+          <ion-modal id="px-tall-modal" trigger="open-px-tall">
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>2000px</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content>
+              <div class="wrapper"><ion-list class="long" lines="none"></ion-list></div>
+            </ion-content>
+          </ion-modal>
+
+          <ion-modal id="long-modal" trigger="open-long">
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>fit-content</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content>
+              <div class="wrapper"><ion-list class="long" lines="none"></ion-list></div>
+            </ion-content>
+          </ion-modal>
+
+          <ion-modal id="long-max-height-modal" trigger="open-long-max-height">
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>fit-content, max-height</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content>
+              <div class="wrapper"><ion-list class="long" lines="none"></ion-list></div>
+            </ion-content>
+          </ion-modal>
+
+          <ion-modal id="nav-modal" trigger="open-nav"></ion-modal>
+
+          <!-- A modal built without ion-content, sized entirely by its markup. -->
+          <ion-modal id="no-content-modal" trigger="open-no-content">
+            <div class="wrapper">
+              <h1 class="ion-margin-horizontal">Modal header</h1>
+              <ion-list class="short" lines="none"></ion-list>
+            </div>
+          </ion-modal>
+
+          <ion-modal id="toggle-modal" trigger="open-toggle">
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>Toggled height</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content>
+              <div class="wrapper">
+                <button id="toggle-height">Toggle --height</button>
+                <ion-list class="short" lines="none"></ion-list>
+              </div>
+            </ion-content>
+          </ion-modal>
+
+          <ion-modal id="part-modal" trigger="open-part">
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>::part(content)</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content>
+              <div class="wrapper"><ion-list class="short" lines="none"></ion-list></div>
+            </ion-content>
+          </ion-modal>
+        </ion-content>
+      </div>
+    </ion-app>
+
+    <script>
+      function fillList(list, count) {
+        for (let i = 0; i < count; i++) {
+          const item = document.createElement('ion-item');
+          item.setAttribute('button', 'true');
+          item.setAttribute('detail', 'false');
+
+          const icon = document.createElement('ion-icon');
+          icon.setAttribute('name', 'person-circle');
+          icon.setAttribute('slot', 'start');
+
+          const label = document.createElement('ion-label');
+          label.textContent = `Item ${i + 1}`;
+
+          item.appendChild(icon);
+          item.appendChild(label);
+          list.appendChild(item);
+        }
+      }
+
+      /**
+       * Passing an element rather than a tag name reuses one nav host. With
+       * `component="nav-host"` the delegate creates another one on every
+       * present and never removes the last, so they pile up.
+       */
+      document.querySelector('ion-modal#nav-modal').component = document.createElement('nav-host');
+
+      /**
+       * Adds and removes an inline `--height`, so the modal falls back to its
+       * own default in between.
+       */
+      document.querySelector('button#toggle-height').addEventListener('click', () => {
+        const modal = document.querySelector('ion-modal#toggle-modal');
+        if (modal.style.getPropertyValue('--height') === '') {
+          modal.style.setProperty('--height', 'fit-content');
+        } else {
+          modal.style.removeProperty('--height');
+        }
+      });
+
+      document.querySelectorAll('ion-list.short').forEach((list) => fillList(list, 3));
+      document.querySelectorAll('ion-list.long').forEach((list) => fillList(list, 30));
+
+      // Selecting an item dismisses the modal it belongs to.
+      document.querySelectorAll('ion-modal').forEach((modal) => {
+        modal.addEventListener('click', (ev) => {
+          if (ev.target.closest('ion-item') !== null) {
+            modal.dismiss();
+          }
+        });
+      });
+    </script>
+  </body>
+</html>
diff --git a/core/src/components/modal/test/content-height/modal.e2e.ts b/core/src/components/modal/test/content-height/modal.e2e.ts
new file mode 100644
index 00000000000..074710891cb
--- /dev/null
+++ b/core/src/components/modal/test/content-height/modal.e2e.ts
@@ -0,0 +1,316 @@
+import { expect } from '@playwright/test';
+import type { E2EPage } from '@utils/test/playwright';
+import { configs, test } from '@utils/test/playwright';
+
+const ISSUE = 'https://github.com/ionic-team/ionic-framework/issues/31149';
+
+/** Height of the child inside `ion-content`, so sizing can be asserted exactly. */
+const CHILD_HEIGHT = 200;
+
+/** Taller than any viewport under test, to force the overflow cases. */
+const TALL_CHILD_HEIGHT = 2000;
+
+const contentModal = (style: string, childHeight = CHILD_HEIGHT) => `
+  <style>
+    ion-modal {
+      ${style}
+    }
+  </style>
+  <ion-modal is-open="true">
+    <ion-content>
+      <div style="height: ${childHeight}px"></div>
+    </ion-content>
+  </ion-modal>
+`;
+
+/**
+ * Nav pages have to be registered before `ion-nav` resolves its root, and the
+ * nav has to arrive through the modal's `component` delegate. An `ion-nav`
+ * slotted inline renders no pages at all.
+ */
+const NAV_MODAL = `
+  <ion-modal></ion-modal>
+  <script>
+    class NavPageOne extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = \`
+          <ion-header><ion-toolbar><ion-title>One</ion-title></ion-toolbar></ion-header>
+          <ion-content><div style="height: 120px"></div></ion-content>
+        \`;
+      }
+    }
+    class NavPageTwo extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = \`
+          <ion-header><ion-toolbar><ion-title>Two</ion-title></ion-toolbar></ion-header>
+          <ion-content><div id="tall-block" style="height: 400px"></div></ion-content>
+        \`;
+      }
+    }
+    class NavHost extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = '<ion-content><ion-nav root="nav-page-one"></ion-nav></ion-content>';
+      }
+    }
+    customElements.define('nav-page-one', NavPageOne);
+    customElements.define('nav-page-two', NavPageTwo);
+    customElements.define('nav-host', NavHost);
+  </script>
+`;
+
+const getContentHeight = async (page: E2EPage) => {
+  const box = await page.locator('ion-modal ion-content').first().boundingBox();
+  return box?.height ?? 0;
+};
+
+const getWrapperHeight = async (page: E2EPage) => {
+  const box = await page.locator('ion-modal .modal-wrapper').boundingBox();
+  return box?.height ?? 0;
+};
+
+/**
+ * A content-sized modal has no definite height to hand down, so the scroll
+ * container only scrolls if it can shrink against the modal's `--max-height`.
+ * `scrollHeight > clientHeight` is what separates scrolling from clipping.
+ */
+const getScrollMetrics = (page: E2EPage) => {
+  return page.locator('ion-modal ion-content').evaluate(async (el: HTMLIonContentElement) => {
+    const scrollEl = await el.getScrollElement();
+    return { scrollHeight: scrollEl.scrollHeight, clientHeight: scrollEl.clientHeight };
+  });
+};
+
+/** Presents a nav modal through the delegate and waits for its first page. */
+const presentNavModal = async (page: E2EPage) => {
+  const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+  await page.locator('ion-modal').evaluate((modal: HTMLIonModalElement) => {
+    modal.component = document.createElement('nav-host');
+    return modal.present();
+  });
+
+  await ionModalDidPresent.next();
+  await page.locator('ion-modal ion-nav nav-page-one').waitFor();
+};
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('modal: content height'), () => {
+    test.describe('content-based heights', () => {
+      /**
+       * Each of these leaves the content an indefinite height to resolve
+       * against, which is what used to collapse it. The content holds a single
+       * fixed height child, so a correct result is exactly that height:
+       * collapsed content measures 0, and a modal that ignored the height would
+       * fill the screen.
+       */
+      const expectSizedToContent = async (page: E2EPage, height: string) => {
+        await page.setContent(contentModal(`--height: ${height};`), config);
+        await expect(page.locator('ion-modal')).toBeVisible();
+
+        await expect(page.locator('ion-modal ion-content')).toHaveClass(/content-sizing/);
+        expect(await getContentHeight(page)).toBeCloseTo(CHILD_HEIGHT, 0);
+      };
+
+      test('should size the content with fit-content', async ({ page }) => {
+        test.info().annotations.push({ type: 'issue', description: ISSUE });
+
+        await expectSizedToContent(page, 'fit-content');
+      });
+
+      test('should size the content with auto', async ({ page }) => {
+        test.info().annotations.push({ type: 'issue', description: ISSUE });
+
+        await expectSizedToContent(page, 'auto');
+      });
+
+      test('should size the content with min-content', async ({ page }) => {
+        test.info().annotations.push({ type: 'issue', description: ISSUE });
+
+        await expectSizedToContent(page, 'min-content');
+      });
+
+      test('should size the content with max-content', async ({ page }) => {
+        test.info().annotations.push({ type: 'issue', description: ISSUE });
+
+        await expectSizedToContent(page, 'max-content');
+      });
+
+      test('should size the content with a prefixed fit-content', async ({ page }) => {
+        /**
+         * Firefox only took `fit-content` unprefixed in 94, so a value carrying
+         * only the `-moz-` prefix still has to be recognized.
+         */
+        await expectSizedToContent(page, '-moz-fit-content');
+      });
+    });
+
+    test.describe('definite heights', () => {
+      test('should fill the screen with the default height', async ({ page }) => {
+        await page.setContent(contentModal(''), config);
+        await expect(page.locator('ion-modal')).toBeVisible();
+
+        const viewport = page.viewportSize()!;
+
+        // Content sizing should not be applied by default.
+        await expect(page.locator('ion-modal ion-content')).not.toHaveClass(/content-sizing/);
+        expect(await getContentHeight(page)).toBeCloseTo(viewport.height, 0);
+      });
+
+      test('should fill and scroll a pixel height', async ({ page }) => {
+        await page.setContent(contentModal('--height: 300px;', TALL_CHILD_HEIGHT), config);
+        await expect(page.locator('ion-modal')).toBeVisible();
+
+        // A definite height is not content-sized, so the ion-content
+        // should fill the modal the way it always has.
+        await expect(page.locator('ion-modal ion-content')).not.toHaveClass(/content-sizing/);
+        expect(await getWrapperHeight(page)).toBeCloseTo(300, 0);
+
+        const { scrollHeight, clientHeight } = await getScrollMetrics(page);
+        expect(clientHeight).toBeCloseTo(300, 0);
+        expect(scrollHeight).toBeGreaterThan(clientHeight);
+      });
+
+      test('should clamp a pixel height taller than the overlay', async ({ page }) => {
+        await page.setContent(contentModal('--height: 2000px;'), config);
+        await expect(page.locator('ion-modal')).toBeVisible();
+
+        const viewport = page.viewportSize()!;
+
+        // 2000px exceeds the overlay, so the default --max-height: 100% should
+        // clamp the height rather than letting it run off screen.
+        expect(await getWrapperHeight(page)).toBeCloseTo(viewport.height, 0);
+      });
+    });
+
+    test.describe('overflowing content', () => {
+      test('should scroll rather than overflow the screen', async ({ page }) => {
+        await page.setContent(contentModal('--height: fit-content;', TALL_CHILD_HEIGHT), config);
+        await expect(page.locator('ion-modal')).toBeVisible();
+
+        const viewport = page.viewportSize()!;
+
+        // The default --max-height keeps a content-sized modal inside the
+        // overlay. Rounded up by one, since the clamp lands on a sub-pixel.
+        expect(await getWrapperHeight(page)).toBeLessThanOrEqual(viewport.height + 1);
+
+        // The content shrinks to reach that cap, leaving the child scrollable.
+        const { scrollHeight, clientHeight } = await getScrollMetrics(page);
+        expect(scrollHeight).toBeGreaterThan(clientHeight);
+      });
+
+      test('should honor a smaller --max-height', async ({ page }) => {
+        await page.setContent(contentModal('--height: fit-content; --max-height: 50%;', TALL_CHILD_HEIGHT), config);
+        await expect(page.locator('ion-modal')).toBeVisible();
+
+        const viewport = page.viewportSize()!;
+
+        // Setting --max-height to 50% should shrink the modal to half the
+        // viewport, rounded up by one.
+        expect(await getWrapperHeight(page)).toBeLessThanOrEqual(viewport.height * 0.5 + 1);
+
+        // The content shrinks to reach that cap, leaving the child scrollable.
+        const { scrollHeight, clientHeight } = await getScrollMetrics(page);
+        expect(scrollHeight).toBeGreaterThan(clientHeight);
+      });
+    });
+
+    test.describe('structure and reactivity', () => {
+      test('should size a modal that has no ion-content', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-modal {
+              --height: fit-content;
+            }
+          </style>
+          <ion-modal is-open="true">
+            <div style="height: ${CHILD_HEIGHT}px"></div>
+          </ion-modal>
+        `,
+          config
+        );
+        await expect(page.locator('ion-modal')).toBeVisible();
+
+        // Sized through `ion-modal > .ion-page` alone, with none of the
+        // content-sizing detection involved.
+        await expect(page.locator('ion-modal ion-content')).toHaveCount(0);
+        expect(await getWrapperHeight(page)).toBeCloseTo(CHILD_HEIGHT, 0);
+      });
+
+      test('should size a modal around an ion-nav and follow it between pages', async ({ page }) => {
+        await page.setContent(`<style>ion-modal { --height: fit-content; }</style>${NAV_MODAL}`, config);
+        await presentNavModal(page);
+
+        // Without the nav being positioned relatively it has no intrinsic
+        // height, so the modal would be 0.
+        const pageOneHeight = await getWrapperHeight(page);
+        expect(pageOneHeight).toBeGreaterThan(100);
+
+        // Page two is taller, so the modal grows to follow the active page.
+        await page.locator('ion-modal ion-nav').evaluate((nav: HTMLIonNavElement) => nav.push('nav-page-two'));
+        await page.locator('ion-modal #tall-block').waitFor();
+
+        expect(await getWrapperHeight(page)).toBeGreaterThan(pageOneHeight);
+      });
+
+      test('should overlap nav pages mid-transition rather than stack them', async ({ page }) => {
+        /**
+         * `setContent` leaves animations enabled, unlike `goto`, so both nav
+         * pages are in the tree at once during the slide. That is the only way
+         * to catch them being laid out one below the other.
+         */
+        await page.setContent(`<style>ion-modal { --height: fit-content; }</style>${NAV_MODAL}`, config);
+        await presentNavModal(page);
+
+        const tops = await page.locator('ion-modal ion-nav').evaluate(async (nav: any) => {
+          nav.push('nav-page-two');
+
+          /**
+           * A page that has been hidden reports a zero rect, so only pages with
+           * a real box count. Sampled per frame because the window where both
+           * are laid out lasts only as long as the slide.
+           */
+          for (let i = 0; i < 60; i++) {
+            await new Promise((resolve) => requestAnimationFrame(resolve));
+
+            const laidOut = Array.from(nav.children).filter((c: any) => c.getBoundingClientRect().height > 0);
+            if (laidOut.length > 1) {
+              return laidOut.map((c: any) => Math.round(c.getBoundingClientRect().top));
+            }
+          }
+
+          return [];
+        });
+
+        // Both pages are laid out during the slide and must share an origin.
+        expect(tops.length).toBeGreaterThan(1);
+        expect(new Set(tops).size).toBe(1);
+      });
+
+      test('should respect a --height set on the modal at runtime', async ({ page }) => {
+        await page.setContent(contentModal(''), config);
+        await expect(page.locator('ion-modal')).toBeVisible();
+
+        const viewport = page.viewportSize()!;
+        const modal = page.locator('ion-modal');
+        const content = page.locator('ion-modal ion-content');
+
+        // No --height of its own, so the modal is on its default full height.
+        await expect(content).not.toHaveClass(/content-sizing/);
+        expect(await getWrapperHeight(page)).toBeCloseTo(viewport.height, 0);
+
+        // Set the --height and verify the observer is picking it up and
+        // adding the content-sizing class to the content.
+        await modal.evaluate((el: HTMLElement) => el.style.setProperty('--height', 'fit-content'));
+        await expect(content).toHaveClass(/content-sizing/);
+        expect(await getContentHeight(page)).toBeCloseTo(CHILD_HEIGHT, 0);
+
+        // Removing it falls back to the default, so a class left behind in
+        // either direction is caught.
+        await modal.evaluate((el: HTMLElement) => el.style.removeProperty('--height'));
+        await expect(content).not.toHaveClass(/content-sizing/);
+        expect(await getWrapperHeight(page)).toBeCloseTo(viewport.height, 0);
+      });
+    });
+  });
+});
diff --git a/core/src/css/core.scss b/core/src/css/core.scss
index c7f7357ab46..d86184a326a 100644
--- a/core/src/css/core.scss
+++ b/core/src/css/core.scss
@@ -203,9 +203,46 @@ ion-modal > .ion-page {
 
   contain: layout style;
 
+  /**
+   * Override the minimum height a flex item gets, which defaults to 
+   * use the height of its own content. Without this, a modal sized 
+   * to its content clips its overflow instead of scrolling it.
+   */
+  min-height: 0;
+
   height: 100%;
 }
 
+/**
+ * Position the `ion-nav` and its page relatively when inside of an 
+ * `ion-content` that is sized to its content. This allows the `ion-nav` 
+ * to take its height from its page and size itself correctly. Without 
+ * this, the modal will not appear as the nav will be 0 height.
+ */
+ion-content.content-sizing ion-nav,
+ion-content.content-sizing ion-nav > .ion-page {
+  position: relative;
+
+  contain: layout style;
+
+  height: auto;
+}
+
+/**
+ * Place every page in the same grid cell so they overlap, while still 
+ * letting the nav take its height from the tallest of them. Without 
+ * this, a transition that has two pages in the tree at once would 
+ * render them one below the other.
+ */
+ion-content.content-sizing ion-nav {
+  display: grid;
+}
+
+ion-content.content-sizing ion-nav > .ion-page {
+  grid-row: 1;
+  grid-column: 1;
+}
+
 .split-pane-visible > .ion-page.split-pane-main {
   position: relative;
 }