title: Grow and shrink table height dynamically
body: <p>I have a dialog box and its body is divided into three parts<br>
  - Body Title<br>
  - Table<br>
  - Footer  </p>
  
  <p>Within body I have two div's. Div1 for Body Title and, Div2 for Table and Footer.</p>
  
  <pre><code>.div2 {
      height: 88%;
  }
  
  .table{
      overflow-y: auto;
  }
  </code></pre>
  
  <p>When there is only one body title it works fine but if there are multiple body titles (multiple rows) then table and footer overflows the dialog body which I don't want.</p>
  
  <p>I tried various combination of flex properties but could not get it right. (because of my limited flex knowledge). </p>
  
  <p>Expected: Even if there are multiple rows for<code>Body Title</code>, <code>Table and Footer</code> should not overflow dialog body and adjust their height within available space.</p>