fix(modal): prevent ion-content collapsing at content-based heights

resolves #31149

Author: brandyscarney

core/src/components/content/content.tsx

@@ -310,6 +310,26 @@ 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();
+    return CONTENT_SIZED_HEIGHTS.includes(height);
+  }
+
   private resize() {
     /**
      * Only force update if the component is rendered in a browser context.
@@ -538,7 +558,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.shouldSizeToContent(),
           overscroll: forceOverscroll,
           [`content-${rtl}`]: true,
         })}
@@ -579,6 +599,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

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;
 }
 

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;
 }