Handsontable不正确的列高度大小

Question

我将以下handontable加载到html div中。

HTML

<div id="example1"></div>

CSS

<style>
.handsontable .colHeader {
   overflow: hidden;
   /* Expands or shrinks column names as required to fill the available free
   space. Stops column headers overflowing onto filters. Causings Col Header row 
   sizing issues on IE and Edge when enabled. */
   display: flex;
   height: 20px;
}
</style>

JS

document.addEventListener("DOMContentLoaded", function() {

var container = document.getElementById('example1'),
    hot;

  hot = new Handsontable(container, {
    data: Handsontable.helper.createSpreadsheetData(10, 200)
    , rowHeaders: true
    , rowHeaderWidth: 25
    , rowHeights: 25
    , colHeaders: true
    , colWidths: 40
    , columnSorting: true
    , filters: true
    , dropdownMenu: true
  });  

});

您可以在以下链接中查看它。

https://jsfiddle.net/JoshAdams/nbLy6j04/

我希望我的列标题名称隐藏在列过滤器符号后面。所以我已经将ColHeaders的显示属性更改为flex。这适用于所有浏览器。

但是，更改此显示值会在MS Edge和IE上导致奇怪的行为。具体来说，它会导致列高度在滚动表时不正确地重新调整大小。见下图。

可以解释IE和Edge不能正确支持display：flex。

所以我的问题是。我可以对我的代码进行任何更改以实现我想要的功能。即如果列标题文本溢出列（和过滤器按钮）隐藏文本的溢出部分？