title: Ionic make modal page fit content height
body: <p>I built a modal page that acts like a custom alert. I needed to add an image to the alert so I followed this to make the custom alert window: <a href="https://stackoverflow.com/questions/41347023/how-to-make-customized-alert-in-ionic-2">How to make customized alert in ionic 2?</a></p>
  
  <p>The problem is that the modal is stretched to fit screen height. Is there a way to make it always fit its own content height? So the height is the minimum it has to be?</p>
  
  <p>this is the scss for the page:</p>
  
  <p><code>modal-alert.scss</code></p>
  
  <pre><code>page-modal-alert {
      background-color: rgba(0, 0, 0, 0.5);
      ion-content.content{
          top: 10%;
          left: 10%;
          width: 80%;
          height: 375px; // &lt;-- fixed
          //height: 75%; // &lt;-- will stretch to screen size
          border-radius: 10px;
          .scroll-content {
              border-radius: 20px;
          }
      }
  }
  </code></pre>
  
  <p>Page template:</p>
  
  <p><code>modal-alert.html</code></p>
  
  <pre><code>&lt;ion-content padding&gt;
    &lt;img src="assets/img/20pointsBox.png"&gt;    
    &lt;div&gt;
      &lt;p&gt;{{ text }}&lt;/p&gt;
      &lt;ion-buttons&gt;
        &lt;button full ion-button color="secondary" (click)="dismiss()"&gt;
          OK
        &lt;/button&gt;
      &lt;/ion-buttons&gt;
    &lt;/div&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p><strong>Edit:</strong></p>
  
  <p>When the class from above is set the modal, it looks like this (but with an image, text and one button):</p>
  
  <p><a href="https://i.stack.imgur.com/ZEszg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZEszg.png" alt="enter image description here"></a></p>
  
  <p>Text and image contents are dynamic, I change them in run-time so sometimes the fixed height of this modal does not match the actual height of its content.</p>
  
  <p>Is there a way to make the modal height fit to the total height of its contents?</p>