title: Ag-Grid has zero height in a flexbox layout
body: <p>My goal is to use ag-grid in an Angular 5 project and have the grid take up all of the available vertical space in a flexbox layout.  The grid seems happy to use "height:100%" when it's contained in a div which has a defined pixel height or when the div has a percentage height but <em>isn't</em> in a flexbox layout.  But it always seems to have no height when I try to host it in a flex item.</p>
  
  <p>How can I get my grid to expand to take up the height of its flex item container? Here's a plunker with an example of what I'm seeing and trying: <a href="https://embed.plnkr.co/D8YgM6/" rel="noreferrer">https://embed.plnkr.co/D8YgM6/</a>.</p>
  
  <p><a href="https://i.stack.imgur.com/bfCyE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/bfCyE.png" alt="enter image description here"></a></p>
  
  <p>Here's how I am creating my layout:</p>
  
  <pre><code>&lt;div style="height:100%;display:flex;flex-direction:column;"&gt;
    &lt;div style="height:250px;flex-grow:0;"&gt;
      &lt;h5&gt;Container div with specified height in pixels, ag-grid with percentage height&lt;/h5&gt;
      &lt;ag-grid-angular style="width: 100%; height: 80%" class="ag-theme-balham"
                       [columnDefs]="columnDefs"
                       [rowData]="rowData"
      &gt;
      &lt;/ag-grid-angular&gt;
    &lt;/div&gt;
    &lt;div style="flex-grow:1;"&gt;
      &lt;h5 class="red"&gt;Container div using flex height, ag-grid with percentage height&lt;/h5&gt;
      &lt;p&gt;How can I get the grid to be aware of my div's actual height?&lt;/p&gt;
      &lt;ag-grid-angular style="width: 100%; height: 80%;" class="ag-theme-balham"
                         [columnDefs]="columnDefs"
                         [rowData]="rowData"
      &gt;
      &lt;/ag-grid-angular&gt;       
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want the grid in the second flex item to have an appropriate height.  How can I do this?</p>