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

Using height: 100% with Flexbox is not gonna work properly, so if you provide a working code snippet, with linked ag-grid resources, you will get a proper answer. — Asons
Furthermore, the card with a h-100 class (setting height to 100%), how does its parent, the col, get its height, and how does the col's parent, the row, get its height? — Asons
@LGSon apologies, I have this plunkr that domnstrates my problem in IE ... plnkr.co/edit/csEfhyrhQLjI196c1cER?p=preview — jjharrison

Asons Asons · Accepted Answer · 2018-02-12T14:24:33

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="[email protected]" 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>

Ag-grid Height inside flex-box row

1 Answers