Javascript 在最近的浏览器中，flexbox层次结构中的Datatables响应溢出 问题

我们使用Datatables响应在引导单元格中显示一个表。它很好用。至少，我们这么认为，但最近发现，在后来的浏览器中，表在很大程度上溢出了屏幕

关于溢出：一些列被折叠，但显然不够。我们有一些较旧版本的代码，当我们下降到阈值以下时（远远超过它应该达到的阈值），列被隐藏。现在已经不是这样了，但是我们有一些根本性的改变（在样式表和JavaScript中），代码比较从窗口中消失了

准确地说：

• 很好
  • 铬47
  • IE11
• 溢出
  • 铬52
  • 铬54
  • FirefoxESR 47和52

我们处于一个公司环境中，所以我们在浏览器方面的选择有限，这就是我所能测试的

配置 数据表的设置方式如下：

HMTL （很抱歉，我无法轻松复制一个案例）

我试过的 回到基本点 我从配置中删除了尽可能多的选项，看看默认的Datatables配置是否更好（扰流板警报：不是）。我也尝试过停用responsive，但仍然出现溢出

我也尽可能地把桌子移到最顶层，但这并没有改变任何事情

我们也编写了自己的样式表，但添加原始样式表并不会改变任何东西

修补工 在浏览了我在SO上看到的所有可能相关的解决方案后（

div.table-responsive

不起作用，而且我已经有了viewport

），我浏览了Datatables API并修改了一些我们尚未设置的选项（例如autoWidth）

我没有注意到有趣的变化

听 我在Datatables事件上添加了一些侦听器。无论响应是否有效，都会被触发。然而，在更现代的浏览器中，情况并非如此

检查Chrome的变更日志 我试过了，但只找到了一个安全修复的列表。这不是我需要的

接下来呢？ 我不知道如何解决这个问题。即使我没有找到解决方案，新的调查线索也会很好

[编辑2017-10-06]线索 我仍在调查，但在DOM中移动表时，我发现哪个元素是第一个显示问题的。它有一个

显示：flex；弹性：10自动样式。移除它修复了问题

我现在必须研究完整的DOM树，但恐怕这与flexbox有关。似乎支持这一点，但建议的解决方案（添加
溢出：隐藏到表的父级）对我来说不起作用。继续我的搜索。
flexbox
显示样式可能会破坏jQuery数据表呈现。您必须检查所有具有
display:flex
属性的父容器，并逐个临时禁用display类型，以查找导致此问题的容器

我认为
flex-shrink:1
可能是您的问题的原因。
将
溢出：隐藏
添加到DOM层次结构中最接近的flex元素，它应该可以解决添加
最小宽度：0到我的网站的内容类为我解决了这个问题

我从这里得到的：
我们确实在flex层次结构中遇到了问题，我必须更新远程父级上的flexbox属性。
<div id="some-ancestor-with-flexbox-styling">
    <div class="row">
        <div class="col-xs-12">
            <table id="my-table" style="width: 100%"></table>
        </div>
    </div>
</div>

$table.DataTable({
    language: {emptyTable: this.i18n.no_data},
    data: content,
    columns: columns,
    responsive: true
});