柔性盒行内的 Ag-grid 高度

Question

我无法在 Internet Explorer 中正确配置我的 ag-grid 高度。它在 Chrome 和 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>

带有 class="row search-result-row" 的外部 div 包含一个 flex-grow: 1 css class 扩展行高以填充剩余屏幕 space。然后有 bootstrap 卡片，h-100 CSS class 设置高度为 100%。

我遇到的问题是 ag-grid。在 chrome 和边缘设置中，网格上 100% 的高度会按预期填充 div，但是 Internet Explorer 中的行为非常不同。它似乎在 ag-grid 和顶层行上不断扩展高度 div 导致两个不断扩展的滚动条。

如果我在网格或外部 div 之一上明确设置高度，我可以避免这种行为，但这不是我需要的。关于在 flex-grow 行和 height : 100% 的其他几个 div 中渲染具有 height:100% 的农业网格，是否存在已知问题或我遗漏的问题。

有关我在 IE 中遇到的问题的示例，请参阅此 plunkr。我已明确添加 css 以显示 bootstrap classes 正在添加的内容。 https://plnkr.co/edit/csEfhyrhQLjI196c1cER?p=preview

Answer 1

IE 需要 flex: 1 而不是 flex-grow: 1，简单地说， 取剩余 space 而不管内容大小

我还添加了一个针对 Firefox 的修复，如果你想要一个很好的解释，你可以在这里阅读更多内容：

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

堆栈片段

// 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>

柔性盒行内的 Ag-grid 高度

Ag-grid Height inside flex-box row

html

css

flexbox

ag-grid