title: Ionic 4 ion-row fill remaining height
body: <p>How to annotate an <code>ion-row</code> so that it fills the remaining space?</p>
  
  <p>For the following example the yellow row "Content" should expand until all the remaining (green) space is taken.</p>
  
  <pre><code>&lt;ion-grid style="background-color: green; height: 100%;"&gt;
    &lt;ion-row&gt;
      &lt;ion-col text-center style="background-color: purple;"&gt;
        &lt;p&gt;Example text&lt;/p&gt;
      &lt;/ion-col&gt;
    &lt;/ion-row&gt;
  
    &lt;ion-row&gt;
      &lt;ion-col text-center style="background-color: yellow"&gt;
        &lt;p&gt;Content&lt;/p&gt;
      &lt;/ion-col&gt;
    &lt;/ion-row&gt;
  
    &lt;ion-row&gt;
      &lt;ion-col text-center style="background-color: blue;"&gt;
        &lt;p&gt;Example text&lt;/p&gt;
      &lt;/ion-col&gt;
    &lt;/ion-row&gt;
  &lt;/ion-grid&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/buZlg.png" rel="noreferrer"><img src="https://i.stack.imgur.com/buZlg.png" alt="Colorful row example"></a></p>
  
  <p>A similar question was asked for Bootstrap and got solved with flex-grow. See: <a href="https://stackoverflow.com/questions/50262517/bootstrap-4-row-fill-remaining-height">Bootstrap 4 row fill remaining height</a> </p>
  
  <p>But can we stretch the row while sticking to th row/col syntax and not introduce more flexboxes?</p>