flexbox - Tabulator layout:"fitColumns" causes vibrating DIV

Question

I have a tabulator 4.9 contained within one element of a flexbox. The flexbox element has flex-grow>0.

Some of my columns are hidden during the initial draw. The select element above the table hides columns and shows the selected column, and redraws the table.

When using layout:"fitColumns", the table has two issues when first rendered-

1. The table is wider than it's container, by roughly the width of the scrollbar. Changing the selectbox above the table causes the table to redraw and fixes this issue.
2. The table vibrates erratically. Both the container DIV and the table are shifting back and forth by 1 or 2 pixels. They appear to be stuck in a feedback loop.

I am using Chrome 87.0.4280.141 (Official Build) (64-bit)

Example here: https://beta.tspcenter.com/tabulator.php

Tabulator code:

table = new Tabulator("#leaderboardTablesContainer", {
    height: "311px",
    layout:"fitColumns",
    index:"Username",
    data: results,
    columns:headers,
    initialSort:[{column:firstVisibleColumn, dir:"desc"}]
}); 

Select element code:

select.addEventListener('change',function(e) {
    table.clearFilter();
    table.hideColumn(table.currentColumnVisible);
    table.showColumn(e.target.value);
    table.setSort(e.target.value,"desc");
    table.currentColumnVisible = e.target.value;
    table.setFilter(e.target.value, "!=", "");
    table.redraw();
});

question from:https://stackoverflow.com/questions/65864836/tabulator-layoutfitcolumns-causes-vibrating-div

Answer 1

I'm not sure why this works. But specifying a width on the flex-element fixed the problem.

flex: 2000 1 450px; width: 5px;

It seems to go against my understanding of flexbox. And indeed, the flexbox grows well past the 5px anyway. It seems kind of hacky but it stops the feedback loop problem and the table displays correctly.