javascript - Datatables Responsive in a flexbox hierarchy overflow in 最近的浏览器

Question

问题

我们使用 Datatables Responsive 在 Bootstrap 单元格中显示表格。它工作正常。至少，我们是这么认为的，但最近发现，在后来的浏览器中，表格基本上会溢出屏幕。

关于溢出:一些列被折叠了，但显然不够。我们有一些旧版本的代码，当我们低于阈值点(远远低于应该的值)时，列会被隐藏。情况已不再如此，但我们进行了一些根本性的更改(在样式表和 JavaScript 中)，代码比较飞出了窗外。

准确地说:

• 工作正常
  • Chrome 47
  • IE11
• 溢出
  • Chrome 52
  • Chrome 54
  • Firefox ESR 47 和 52

我们处于公司环境中，因此我们在现有浏览器中的选择有限，这就是我能测试的全部内容。

配置

数据表是这样设置的:

HTML

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

JavaScript

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

(对不起，我不能轻易重现案例)

我尝试过的

回到基础

我尽可能多地从配置中删除了选项，看看默认的 Datatables 配置是否更好(剧透警告:事实并非如此)。我也尝试停用响应，但仍然会发生溢出。

我还尽可能地将表格移到了顶层，但这并没有改变任何东西。

我们还编写了自己的样式表，但添加原始样式表并没有改变任何内容。

修补匠

在浏览了我在 SO 上看到的所有可能相关的解决方案后(div.table-responsive 不起作用，我已经有了视口(viewport) <meta/>)，我浏览了 Datatables API 并修改了一些我们尚未设置的选项(例如自动宽度)。

我没有注意到任何有趣的变化。

听力

我在 Datatables 事件上添加了一些监听器。 Responsive 是否有效， column-sizing 被解雇了。然而，在更现代的浏览器中， responsive-resize 不是。

检查 Chrome 的更新日志

我试过了，但只找到了一个安全修复列表。这不是我需要的。

下一步是什么？

我不知道如何解决这个问题。即使我没有得到解决方案，新的调查线索也会很棒!

[编辑2017-10-06]线索

我仍在调查，但在 DOM 中四处移动表格，我发现哪个元素最先出现问题。它有一个 display: flex; flex: 1 0 auto;风格。删除它可以解决问题。

我现在必须调查完整的 DOM 树，但恐怕这与 flexbox 有关。 This post on Datatables' forum似乎支持这一点，但建议的解决方案(将 overflow: hidden 添加到表的父级)对我来说并不奏效。继续我的搜索。

Answer 1

flexbox 显示样式会破坏 jQuery DataTable 渲染。您必须检查所有具有 display: flex 属性的父容器，并暂时逐个禁用显示类型，以找出导致此问题的容器。

我认为 flex-shrink:1 可能是导致您出现问题的原因。