Ag-grid Height inside flex-box row

Question

I am having trouble configuring my ag-grid height correctly in Internet Explorer. It is working fine in both Chrome and Edge.

<div class="row search-result-row">
    <div class="col">
        <div class="card h-100">
            <div class="card-block h-100">

                <ag-grid-aurelia #agGrid class="ag-bootstrap"
                         style="width: 100%; height: 100%;"
                         grid-options.bind="gridOptions"
                         column-defs.bind="columnDefs">
                </ag-grid-aurelia>
                
            </div>
        </div>
    </div>
</div>

The outer div with class="row search-result-row" contains a flex-grow: 1 css class that expands the row height to fill the remaining screen space. There is then bootstrap card with a h-100 CSS class to set height of 100%.

The problem I have is with the ag-grid. In chrome and edge setting a height of 100% on the grid fills the div as expected however the behaviors in Internet explorer is very different. It seems to be on a continuous loop of expanding height on both the ag-grid and the top level row div causing two ever expanding scroll bars.

I can avoid this behavior if I explicitly set a height on the grid or one of the outer divs however this is not what I need. Is there a known issue or something I'm missing with regards to rendering an ag-grid with height:100% inside a flex-grow row and several other divs of height : 100% .

Please see this plunkr for an example of my problem in IE. I have explicitly added the css to show what the bootstrap classes are adding. https://plnkr.co/edit/csEfhyrhQLjI196c1cER?p=preview

Answer 1

IE need flex: 1 instead of flex-grow: 1 , which simply put mean, take remaining space regardless of content size

I also added a fix for Firefox, and you can read more here if you want a great explanation:

• Why don't flex items shrink past content size?

.second-row{
  flex: 1;                     /*  changed, fix for IE  */
  min-height: 0;               /*  added, fix for Firefox  */
  display: flex;
  margin-left: -15px;
  margin-right: -15px;
}

Stack snippet

 // this example has items declared globally. bad javascript. but keeps the example simple. var columnDefs = [ {headerName: "Date", field: "date", cellRenderer : function(params) { console.log('inside cell renderer, got ' + Object.prototype.toString.call(params.value)); return params.value.toLocaleString(); }, filter: 'set', filterParams : { cellRenderer : function(params) { console.log('inside filter cell renderer, got ' + Object.prototype.toString.call(params.value)); return params.value.toLocaleString(); } } } ]; var rowData = [ {date: new Date('2015-11-10T23:15:02.904Z')}, {date: new Date('2015-09-02T12:15:02.904Z')}, {date: new Date('2015-11-10T23:15:02.904Z')}, {date: new Date('2015-11-10T23:15:02.904Z')}, {date: new Date('2015-09-02T12:15:02.904Z')}, {date: new Date('2015-11-10T23:15:02.904Z')}, {date: new Date('2015-11-10T23:15:02.904Z')}, {date: new Date('2015-09-02T12:15:02.904Z')}, {date: new Date('2015-11-10T23:15:02.904Z')}, {date: new Date('2015-11-10T23:15:02.904Z')}, {date: new Date('2015-09-02T12:15:02.904Z')}, {date: new Date('2015-11-10T23:15:02.904Z')}, {date: new Date('2015-11-10T23:15:02.904Z')}, {date: new Date('2015-09-02T12:15:02.904Z')}, {date: new Date('2015-11-10T23:15:02.904Z')}, {date: new Date('2015-11-10T23:15:02.904Z')}, {date: new Date('2015-09-02T12:15:02.904Z')}, {date: new Date('2015-11-10T23:15:02.904Z')}, {date: new Date('2015-11-10T23:15:02.904Z')}, {date: new Date('2015-09-02T12:15:02.904Z')}, {date: new Date('2015-11-10T23:15:02.904Z')}, {date: new Date('2015-11-10T23:15:02.904Z')}, {date: new Date('2015-09-02T12:15:02.904Z')}, {date: new Date('2015-11-10T23:15:02.904Z')}, {date: new Date('2015-11-10T23:15:02.904Z')}, {date: new Date('2015-09-02T12:15:02.904Z')}, {date: new Date('2015-11-10T23:15:02.904Z')}, {date: new Date('2015-11-10T23:15:02.904Z')}, {date: new Date('2015-09-02T12:15:02.904Z')}, {date: new Date('2015-11-10T23:15:02.904Z')}, {date: new Date('2015-11-10T23:15:02.904Z')}, {date: new Date('2015-09-02T12:15:02.904Z')}, {date: new Date('2015-11-10T23:15:02.904Z')}, {date: new Date('2015-11-10T23:15:02.904Z')}, {date: new Date('2015-09-02T12:15:02.904Z')}, {date: new Date('2015-11-10T23:15:02.904Z')}, {date: new Date('2015-11-10T23:15:02.904Z')}, {date: new Date('2015-09-02T12:15:02.904Z')}, {date: new Date('2015-11-10T23:15:02.904Z')}, {date: new Date('2015-11-10T23:15:02.904Z')}, {date: new Date('2015-09-02T12:15:02.904Z')}, {date: new Date('2015-11-10T23:15:02.904Z')} ]; var gridOptions = { columnDefs: columnDefs, rowData: rowData, enableColResize: true, enableFilter: true }; // wait for the document to be loaded, otherwise // ag-Grid will not find the div in the document. document.addEventListener("DOMContentLoaded", function() { // angularGrid is a global function agGridGlobalFunc('#myGrid', gridOptions); gridOptions.api.sizeColumnsToFit(); });

 /* Put your css in here */ html{ height: 100%;; width: 100%; } body{ height: 100%; } h1 { color: red; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link data-require="bootstrap-css@4.0.0-alpha.4" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" /> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/2.3.5/ag-grid.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/2.3.5/ag-grid.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/2.3.5/theme-fresh.css" /> <style> #container{ display: flex; flex-direction: column; height: 100%; } .first-row{ background-color: blue; /*flex-grow: 0; default, not needed */ display: flex; margin-left: -15px; margin-right: -15px; } .second-row{ flex: 1; /* added, fix for IE */ min-height: 0; /* added, fix for Firefox */ display: flex; margin-left: -15px; margin-right: -15px; } .col{ flex-basis: 0; flex-grow:1; max-width: 100%; padding-left: 15px; padding-right: 15px; position: relative; } .card{ position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0, 0, 0, 0.125); border-radius: 0.25rem; } .h-100{ height: 100%; } </style> </head> <body> <!-- Put your html here! --> <div id="container"> <div class="row first-row"> <div class="col"> <div class="card h-100"> <div class="card-block"> This is the card This is the card This is the card This is the card </div> </div> </div> </div> <div class="row second-row"> <div class="col"> <div class="card h-100"> <div class="card-block h-100"> <div id="myGrid" style="height:100%;" class="ag-fresh"></div> </div> </div> </div> </div> </div> </body> </html>